:root {
  --accent-base: #f4641d;

  --on-accent: #ffffff;

  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --maxw: 1200px;

  --ss-shadow-sm:
    0 1px 2px rgba(20, 22, 27, 0.05), 0 1px 1px rgba(20, 22, 27, 0.03);
  --ss-shadow-md:
    0 6px 20px -6px rgba(20, 22, 27, 0.16),
    0 2px 6px -2px rgba(20, 22, 27, 0.08);
  --ss-shadow-lg: 0 20px 48px -12px rgba(20, 22, 27, 0.22);
}

body.theme-light {
  --bg: #ffffff;
  --bg-subtle: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --border: #e8eaf0;
  --border-strong: #d8dbe4;
  --text: #14161b;
  --text-2: #565d6c;
  --text-3: #8b93a3;
  --accent: var(--accent-base);
  --accent-2: color-mix(in srgb, var(--accent) 80%, #ffffff);
  --accent-press: color-mix(in srgb, var(--accent) 84%, #000000);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));

  --c-pdf: #e5544b;
  --c-image: #8257e6;
  --c-video: #2f7df0;
  --c-audio: #1ba672;

  --bg-gradient: #ffffff;
  --container-bg: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --border-color: #e8eaf0;
  --text-color: #14161b;
  --muted-text: #565d6c;
  --heading-color: #14161b;
  --heading-sub: #565d6c;
  --primary-color: var(--accent);
  --primary-hover: var(--accent-press);
  --primary-shadow: color-mix(in srgb, var(--accent) 22%, transparent);
  --link: var(--accent);
  --link-hover: var(--accent-press);
  --primary-blue: var(--accent);
  --primary-blue-hover: var(--accent-press);
  --accent-blue: var(--accent);
  --dropdown-bg: #ffffff;

  --ss-footer-bg: #faf8f4;
  --footer-section-bg: #faf8f4;
  --footer-nav-bg: #faf8f4;
  --footer-bottom-bg: #faf8f4;
  --footer-border: #ece7df;
}

body.theme-dark {
  --bg: #050506;
  --bg-subtle: #0d0d0f;
  --surface: #121214;
  --surface-2: #18181b;
  --border: #262629;
  --border-strong: #353539;
  --text: #f4f4f6;
  --text-2: #a6a6ad;
  --text-3: #6b6b73;
  --accent: color-mix(in srgb, var(--accent-base) 90%, #ffffff);
  --accent-2: color-mix(in srgb, var(--accent) 82%, #ffffff);
  --accent-press: color-mix(in srgb, var(--accent) 86%, #000000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));

  --c-pdf: #ff6b62;
  --c-image: #a385ff;
  --c-video: #5aa0ff;
  --c-audio: #34c794;

  --bg-gradient: #050506;
  --container-bg: #121214;
  --card-bg: #121214;
  --input-bg: #18181b;
  --border-color: #262629;
  --text-color: #f4f4f6;
  --muted-text: #a6a6ad;
  --heading-color: #f4f4f6;
  --heading-sub: #a6a6ad;
  --primary-color: var(--accent);
  --primary-hover: var(--accent-press);
  --primary-shadow: color-mix(in srgb, var(--accent) 30%, transparent);
  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 82%, #ffffff);
  --primary-blue: var(--accent);
  --primary-blue-hover: color-mix(in srgb, var(--accent) 82%, #ffffff);
  --accent-blue: var(--accent);
  --dropdown-bg: #121214;

  --ss-footer-bg: #131110;
  --footer-section-bg: #131110;
  --footer-nav-bg: #131110;
  --footer-bottom-bg: #131110;
  --footer-border: #2a2723;
}

body {
  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
}
::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

body.theme-light::before,
body.theme-dark::before {
  display: none !important;
  background: none !important;
  content: none !important;
}

.button-primary,
.btn-primary,
body.theme-light .button-primary,
body.theme-light .btn-primary,
body.theme-dark .button-primary,
body.theme-dark .btn-primary {
  border: none !important;
  border-radius: 10px !important;
  color: var(--on-accent) !important;
  background: linear-gradient(
    180deg,
    var(--accent-2),
    var(--accent)
  ) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset,
    0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent),
    0 1px 2px rgba(20, 22, 27, 0.1) !important;
  font-weight: 700;
  transition:
    transform 0.12s,
    background 0.15s,
    box-shadow 0.15s;
}
.button-primary:hover,
.btn-primary:hover,
body.theme-light .button-primary:hover,
body.theme-light .btn-primary:hover,
body.theme-dark .button-primary:hover,
body.theme-dark .btn-primary:hover {
  background: linear-gradient(
    180deg,
    var(--accent-2),
    var(--accent)
  ) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset,
    0 12px 22px -8px color-mix(in srgb, var(--accent) 85%, transparent),
    0 1px 2px rgba(20, 22, 27, 0.1) !important;
}
.button-primary:active,
.btn-primary:active,
body.theme-light .button-primary:active,
body.theme-dark .button-primary:active {
  background: linear-gradient(
    180deg,
    var(--accent),
    var(--accent-press)
  ) !important;
  transform: translateY(1px);
  box-shadow: 0 2px 6px -3px color-mix(in srgb, var(--accent) 80%, transparent) !important;
}
.button-primary i,
.btn-primary i,
.button-primary .fas,
.btn-primary .fas {
  color: var(--on-accent) !important;
}

.button-secondary,
.btn-secondary {
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.button-secondary:hover,
.btn-secondary:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-subtle) !important;
}

.button-lg,
.btn-lg {
  padding: 14px 26px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

/* ============================================================
   Navbar — theme the shared base `.nb-*` header (design Layer 2).
   The base navbar renders from `.nb-*` classes and resolves its
   colours from --primary-blue (→ the orange --accent) through the
   --brand/--nb-* variables, so the palette is already ours. We only
   set the project theming hooks below — no markup fork, no !important.

   The previous `.navbar` / `.mega-menu-*` / `.dropdown-content`
   overrides were removed: the base navbar was rebuilt on the `nb-`
   prefix, so those selectors matched nothing and left the header
   unthemed. These theming hooks are the supported replacement. */
.nb-root,
.nb-drawer {
  /* Soft-rounded SimpleSize shapes (base defaults are a touch larger). */
  --nb-radius-control: 10px;
  --nb-radius-row: 9px;
  --nb-radius-panel: 16px;

  /* Match the site's link/row weight and size. */
  --nb-link-size: 14.5px;
  --nb-link-weight: 600;
  --nb-row-size: 14px;
  --nb-row-weight: 600;

  /* Hover: bar links take the subtle grey wash and stay put; panel rows
     take the accent tint and slide, as the old mega-menu did. */
  --nb-link-hover-bg: var(--bg-subtle);
  --nb-link-hover-lift: 0px;
  --nb-row-hover-bg: var(--accent-soft);
  --nb-row-hover-shift: 4px;
}

/* Accent the current top-level item, matching the old `.navbar a.active`. */
.nb-row--top.active,
.nb-row--top[aria-current='page'] {
  color: var(--accent);
}

/* FAQ uses the shared base_collapse component's default card look
   (border, background, radius, shadow) - color-only override here. */
.collapse-faq.collapse-container {
  --collapse-accent: var(--accent);
}

/* Colour-only overrides - layout/spacing/shape all come from the shared
   base_footer.css design (rounded shell, card nav-grid, pill hovers). */
footer.footer {
  background: var(--ss-footer-bg) !important;
}
.footer-navigation {
  background: var(--ss-footer-bg) !important;
}
.footer-brand {
  color: var(--text);
}
.footer-brand-name {
  color: var(--text);
}
.footer-brand-tagline,
.footer .about p {
  color: var(--text-2);
}
.footer-nav-title {
  color: var(--text-3);
}
.footer-nav-link-title,
.footer-nav-links a {
  color: var(--text-2) !important;
}
.footer-nav-links a:hover,
.footer-nav-links a:hover .footer-nav-link-title {
  color: var(--accent) !important;
}
.footer-bottom {
  background: var(--ss-footer-bg) !important;
  color: var(--text-3);
}
.footer-bottom .footer-copyright,
.footer-bottom .footer-credit-inline,
.footer-bottom .footer-made-in-europe {
  color: var(--text-3);
}

.about-hero {
  background: linear-gradient(
    135deg,
    rgba(244, 100, 29, 0.08) 0%,
    rgba(255, 154, 90, 0.06) 50%,
    rgba(244, 100, 29, 0.04) 100%
  ) !important;
}
body.theme-dark .about-hero {
  background: linear-gradient(
    135deg,
    #1a1310 0%,
    #1f1410 50%,
    #181210 100%
  ) !important;
}
.about-hero-orb-1 {
  background: linear-gradient(135deg, #f4641d 0%, #ff9a5a 100%) !important;
}
.about-hero-orb-2 {
  background: linear-gradient(135deg, #ff7a4d 0%, #f4641d 100%) !important;
}
.about-hero-orb-3 {
  background: linear-gradient(135deg, #ffb37a 0%, #f4641d 100%) !important;
}
.about-section-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    transparent 100%
  ) !important;
}

.contact-info-panel,
body.theme-light .contact-info-panel {
  background: linear-gradient(
    135deg,
    rgba(244, 100, 29, 0.1) 0%,
    rgba(255, 154, 90, 0.07) 50%,
    rgba(244, 100, 29, 0.05) 100%
  ) !important;
}
body.theme-dark .contact-info-panel {
  background: linear-gradient(
    135deg,
    #1a1310 0%,
    #1f1410 50%,
    #181210 100%
  ) !important;
}
/* The base contact.css assumes this card sits on a dark, saturated brand
   background and hardcodes white text/icon fills for it. Our light-theme
   background above is a near-white tint instead, so that white text/fills
   need a matching dark-on-light override here (dark theme's near-black
   background already contrasts fine with the base white text - no override
   needed there). */
body.theme-light .contact-info-title {
  color: var(--text) !important;
}
body.theme-light .contact-info-subtitle,
body.theme-light .contact-info-label {
  color: var(--text-2) !important;
}
body.theme-light .contact-info-value {
  color: var(--text) !important;
}
body.theme-light .contact-info-icon {
  background: rgba(244, 100, 29, 0.14) !important;
  color: var(--accent) !important;
}
body.theme-light .contact-social {
  border-top-color: var(--border) !important;
}
body.theme-light .contact-social-label {
  color: var(--text-3) !important;
}
body.theme-light .contact-social-row .footer-social {
  background: rgba(244, 100, 29, 0.1) !important;
  border-color: rgba(244, 100, 29, 0.3) !important;
  color: var(--accent) !important;
}
body.theme-light .contact-social-row .footer-social:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}
.contact-orb-1,
.contact-form-orb-1,
.contact-form-orb-4 {
  background: linear-gradient(135deg, #f4641d 0%, #ff9a5a 100%) !important;
}
.contact-orb-2,
.contact-form-orb-2 {
  background: linear-gradient(135deg, #ff7a4d 0%, #f4641d 100%) !important;
}
.contact-orb-3,
.contact-form-orb-3 {
  background: linear-gradient(135deg, #ffb37a 0%, #f4641d 100%) !important;
}
.contact-form-dot-grid,
body.theme-light .contact-form-dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(244, 100, 29, 0.1) 1px,
    transparent 1px
  ) !important;
}
body.theme-light .contact-next-num {
  border-color: rgba(244, 100, 29, 0.4) !important;
}

:root {
  --base-sidebar-accent: #ff8a4c !important;
  --base-sidebar-item-active: rgba(244, 100, 29, 0.18) !important;
  --base-sidebar-control-bg: rgba(244, 100, 29, 0.1) !important;
  --base-sidebar-control-bg-hover: rgba(244, 100, 29, 0.16) !important;
  --base-sidebar-control-border: rgba(244, 100, 29, 0.3) !important;
  --base-sidebar-border-gradient: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.22) 0%,
    rgba(67, 67, 74, 0.25) 100%
  ) !important;
}
body.theme-light {
  --base-sidebar-accent: #f4641d !important;
  --base-sidebar-item-hover: rgba(244, 100, 29, 0.06) !important;
  --base-sidebar-item-active: rgba(244, 100, 29, 0.12) !important;
  --base-sidebar-control-bg: rgba(244, 100, 29, 0.08) !important;
  --base-sidebar-control-bg-hover: rgba(244, 100, 29, 0.14) !important;
  --base-sidebar-control-border: rgba(244, 100, 29, 0.2) !important;
  --base-sidebar-border-gradient: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(148, 163, 184, 0.12) 100%
  ) !important;
}
.base-sidebar .base-sidebar__item-link.active,
.base-sidebar .base-sidebar__item-toggle.active,
body.theme-light .base-sidebar .base-sidebar__item-link.active,
body.theme-light .base-sidebar .base-sidebar__item-toggle.active {
  background: var(--base-sidebar-item-active) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.base-sidebar .base-sidebar__item-link.active::before,
.base-sidebar .base-sidebar__item-toggle.active::before {
  display: none !important;
}
.base-sidebar .base-sidebar__item-link.active .base-sidebar__item-icon,
.base-sidebar .base-sidebar__item-toggle.active .base-sidebar__item-icon,
body.theme-light
  .base-sidebar
  .base-sidebar__item-link.active
  .base-sidebar__item-icon,
body.theme-light
  .base-sidebar
  .base-sidebar__item-toggle.active
  .base-sidebar__item-icon {
  color: var(--base-sidebar-accent) !important;
}

.base-sidebar[data-sidebar-id='user-panel-sidebar'],
body.theme-light .base-sidebar[data-sidebar-id='user-panel-sidebar'],
.up-panel,
body.theme-light .up-panel {
  --up-accent: #f4641d !important;
  --up-accent-soft: rgba(244, 100, 29, 0.1) !important;
  --up-accent-line: rgba(244, 100, 29, 0.32) !important;
}
body
  .base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active::before,
body
  .base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active::before {
  display: none !important;
}
.base-sidebar__title-card {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(48, 48, 55, 0.65))
      padding-box,
    linear-gradient(135deg, rgba(244, 100, 29, 0.5), rgba(255, 138, 76, 0.45))
      border-box !important;
}
.base-sidebar__title-card:hover {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(48, 48, 55, 0.75))
      padding-box,
    linear-gradient(135deg, rgba(244, 100, 29, 0.65), rgba(255, 138, 76, 0.6))
      border-box !important;
}
.base-sidebar__search-input:focus {
  background: rgba(244, 100, 29, 0.12) !important;
  border-color: rgba(244, 100, 29, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(244, 100, 29, 0.1) !important;
}
.base-sidebar__quick-jump-input:focus {
  border-color: rgba(244, 100, 29, 0.5) !important;
  background: rgba(244, 100, 29, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(244, 100, 29, 0.12) !important;
}
.base-sidebar__quick-jump-btn {
  border-color: rgba(255, 138, 76, 0.4) !important;
  background: rgba(244, 100, 29, 0.92) !important;
  box-shadow: 0 4px 12px rgba(244, 100, 29, 0.2) !important;
}
.base-sidebar__quick-jump-btn:hover {
  background: rgba(244, 100, 29, 1) !important;
  box-shadow: 0 6px 16px rgba(244, 100, 29, 0.3) !important;
}