/*-----------------------------------------------------------------------------------
    PLMMarket Site Theme
    Based on the existing EkoAI/main.css structure, recolored and tightened with the
    PLMMusic black / gold / red visual system from C:\inetpub\PLMMusic\index.html.
-----------------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=DM+Mono:wght@400;500&display=swap");

:root {
  --plm-black: #07080C;
  --plm-surface: #0E1018;
  --plm-surface-2: #161A26;
  --plm-ink: #F4F2EE;
  --plm-muted: #A39F98;
  --plm-muted-2: #736F69;
  --plm-gold: #C9922A;
  --plm-gold-light: #E2AE48;
  --plm-gold-dim: rgba(201, 146, 42, .13);
  --plm-red: #B3292E;
  --plm-red-dim: rgba(179, 41, 46, .16);
  --plm-emerald: #00C875;
  --plm-border: rgba(244, 242, 238, .09);
  --plm-border-gold: rgba(201, 146, 42, .34);

  --color-heading: var(--plm-ink);
  --color-body: var(--plm-muted);
  --color-generator: #BDB8AF;
  --color-white: var(--plm-ink);
  --color-fullWhite: #FFFFFF;
  --color-black: var(--plm-black);
  --color-light: #BDB8AF;
  --color-placeholder: #7f7b75;
  --color-body-primary: var(--plm-ink);
  --color-primary: var(--plm-gold);
  --color-secondary: var(--plm-red);
  --color-success: var(--plm-emerald);
  --color-teal: #1E9E83;
  --color-taxonomy: var(--plm-muted-2);
  --color-label: var(--plm-ink);
  --color-text-muted: var(--plm-muted-2);
  --color-rating: var(--plm-gold-light);
  --color-body-bg: var(--plm-black);
  --color-body-light: #F4F2EE;
  --color-bg-primary: var(--plm-surface);
  --color-bg-secondary: var(--plm-surface-2);
  --color-bg-3: #10131D;
  --color-message-surface: #141823;
  --color-border-primary: var(--plm-border);
  --color-border-secondary: rgba(244, 242, 238, .18);
  --color-gradient-1: linear-gradient(92deg, var(--plm-gold) 0%, var(--plm-gold-light) 45%, var(--plm-red) 100%);
  --primary-rgb: 201, 146, 42;
  --primary-rgb-1: rgba(var(--primary-rgb), .13);
  --primary-rgb-05: rgba(var(--primary-rgb), .05);

  --ff-body: "DM Sans", "Inter", sans-serif;
  --ff-title: "Bebas Neue", "DM Sans", sans-serif;
  --ff-p: "DM Sans", sans-serif;
  --ff-mono: "DM Mono", monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--plm-ink);
  background:
    radial-gradient(ellipse 60% 45% at 72% 8%, rgba(201, 146, 42, .14), transparent 64%),
    radial-gradient(ellipse 50% 40% at 18% 86%, rgba(179, 41, 46, .12), transparent 66%),
    var(--plm-black) !important;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6,
.bd-section-title, .bd-banner-title, .bd-footer-widget-title {
  color: var(--plm-ink);
  font-family: var(--ff-title);
  letter-spacing: .018em;
  text-transform: uppercase;
}

h1, .h1, .bd-banner-title {
  font-size: clamp(58px, 8vw, 112px);
  line-height: .9;
}

h2, .h2, .bd-section-title {
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: .95;
}

h3, .h3 {
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1;
}

p, .bd-section-paragraph, .bd-footer-widget-description {
  color: var(--plm-muted);
}

strong, b {
  color: var(--plm-ink);
}

a:hover,
.main-menu ul li:hover > a,
.main-menu ul li a.active,
.bd-footer-widget-links li a:hover,
.underline a:hover {
  color: var(--plm-gold-light) !important;
}

::selection {
  background: var(--plm-gold);
  color: var(--plm-black);
}

/* Header / navigation */
.bd-header-top-bar,
.header-top-bg {
  background: linear-gradient(90deg, rgba(201, 146, 42, .16), rgba(179, 41, 46, .12));
  border-bottom: 1px solid var(--plm-border-gold);
}

.bd-header-top-content .title,
.bd-header-top-content span,
.bd-header-top-btn .purchase-btn {
  color: var(--plm-ink);
}

.bd-header-area {
  background: rgba(7, 8, 12, .92) !important;
  border-bottom: 1px solid var(--plm-border);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 58px rgba(0, 0, 0, .26);
}

.bd-header-inner {
  min-height: 78px;
  padding-inline: clamp(18px, 5vw, 72px);
}

.bd-header-logo img,
.bd-footer-widget-logo img {
  filter: drop-shadow(0 10px 30px rgba(201, 146, 42, .18));
}

.main-menu ul li a,
.bd-header-right > ul > li > a {
  color: var(--plm-muted);
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.main-menu ul li .submenu,
.dropdown-menu {
  background: rgba(14, 16, 24, .98) !important;
  border: 1px solid var(--plm-border-gold);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

.main-menu ul li .submenu li a,
.dropdown-menu a,
.bd-user-info .name {
  color: var(--plm-ink) !important;
}

.bd-header-search input,
.bd-footer-subscribe-form input,
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], input[type=file], input[type=url],
select, textarea {
  background: rgba(244, 242, 238, .025) !important;
  border: 1px solid var(--plm-border) !important;
  color: var(--plm-ink) !important;
}

.bd-header-search input:focus,
.bd-footer-subscribe-form input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--plm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 146, 42, .12);
}

/* Hero and section surfaces */
.bd-banner-area,
.bd-hero-area,
.bd-breadcrumb-area,
.bd-about-area,
.bd-service-area,
.bd-mvv-area,
.bd-blog-area,
.bd-team-area,
.bd-pricing-area,
.bd-contact-area,
.bd-privacy-policy-area,
.bd-error-area,
.bd-authentication-area,
main > section {
  position: relative;
  background: transparent !important;
}

.bd-banner-area::before,
.bd-breadcrumb-area::before,
.bd-about-area::before,
.bd-service-area::before,
.bd-pricing-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 52% at 64% 26%, rgba(201, 146, 42, .12), transparent 64%),
    radial-gradient(ellipse 52% 40% at 20% 88%, rgba(179, 41, 46, .10), transparent 64%);
}

.bd-breadcrumb-list,
.bd-breadcrumb-list a,
.bd-breadcrumb-list .divider {
  color: var(--plm-muted);
}

.bd-breadcrumb-list .active,
.bd-breadcrumb-list span a:hover,
.bd-breadcrumb-glow,
.bd-banner-subtitle,
.bd-section-subtitle,
.bd-section-title-wrapper .subtitle,
.section-kicker {
  color: var(--plm-gold) !important;
}

.bd-badge,
.badge-primary,
.nav-pill {
  background: var(--plm-gold-dim) !important;
  border: 1px solid var(--plm-border-gold);
  color: var(--plm-gold-light) !important;
  border-radius: 999px;
  font-family: var(--ff-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bd-card,
.bd-service-wrapper,
.bd-service-item,
.bd-pricing-wrapper,
.bd-blog-wrapper,
.bd-contact-address-box,
.bd-authentication-form-wrapper,
.bd-app-service-box,
.bd-generator-box,
.bd-team-wrapper,
.bd-mvv-wrapper,
.bd-about-wrapper,
.accordion-common-style .accordion-item,
.domain-card,
.audience-card,
.quote-panel {
  background: linear-gradient(180deg, rgba(244, 242, 238, .035), rgba(244, 242, 238, .014)) !important;
  border: 1px solid var(--plm-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.bd-card:hover,
.bd-service-wrapper:hover,
.bd-service-item:hover,
.bd-pricing-wrapper:hover,
.bd-blog-wrapper:hover,
.bd-contact-address-box:hover,
.bd-app-service-box:hover,
.bd-generator-box:hover,
.bd-team-wrapper:hover {
  border-color: var(--plm-border-gold) !important;
  transform: translateY(-6px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34), 0 0 0 1px rgba(201, 146, 42, .08);
}

.primary-bg,
.secondary-bg,
.bg-surface,
.bd-footer-area-main-content,
.accordion-common-style .accordion-button,
.accordion-common-style .accordion-body {
  background-color: var(--plm-surface) !important;
}

.section-separator::before,
.section-separator::after,
.section-separator-top::after {
  background: linear-gradient(90deg, rgba(7, 8, 12, 0), rgba(201, 146, 42, .28), rgba(7, 8, 12, 0));
}

/* Buttons */
.bd-btn,
.btn-primary,
.btn-gradient,
.bd-footer-subscribe-form button,
.purchase-btn {
  background: var(--plm-gold) !important;
  border: 1px solid var(--plm-gold) !important;
  color: var(--plm-black) !important;
  border-radius: 4px !important;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.bd-btn:hover,
.btn-primary:hover,
.btn-gradient:hover,
.bd-footer-subscribe-form button:hover,
.purchase-btn:hover {
  background: var(--plm-gold-light) !important;
  border-color: var(--plm-gold-light) !important;
  color: var(--plm-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(201, 146, 42, .22);
}

.btn-outline-primary,
.btn-ghost,
.bd-text-btn {
  background: rgba(244, 242, 238, .025) !important;
  border: 1px solid var(--plm-border) !important;
  color: var(--plm-ink) !important;
  border-radius: 4px !important;
}

.btn-outline-primary:hover,
.btn-ghost:hover,
.bd-text-btn:hover {
  border-color: var(--plm-gold) !important;
  color: var(--plm-gold-light) !important;
  background: rgba(201, 146, 42, .08) !important;
}

/* Footer */
.bd-footer-area {
  background: var(--plm-black) !important;
  border-top: 1px solid var(--plm-border);
}

.bd-footer-copyright-area {
  background: rgba(7, 8, 12, .94) !important;
  border-top: 1px solid var(--plm-border);
}

.bd-footer-widget-title,
.bd-footer-copyright p,
.bd-footer-copyright-list a,
.bd-footer-social a {
  color: var(--plm-ink) !important;
}

.bd-footer-widget-links li a,
.bd-footer-widget-description,
.bd-footer-copyright p {
  color: var(--plm-muted) !important;
}

/* Utility accents inspired by PLMMusic */
.plm-outline,
.outline {
  color: transparent !important;
  -webkit-text-stroke: 1.2px var(--plm-gold);
  text-stroke: 1.2px var(--plm-gold);
}

.plm-panel-gold,
.quote-panel {
  border-color: var(--plm-border-gold) !important;
  background: linear-gradient(160deg, var(--plm-gold-dim), rgba(22, 26, 38, .72)) !important;
}

.plm-kicker,
.hero-kicker,
.section-kicker {
  color: var(--plm-gold);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.progress-wrap {
  box-shadow: inset 0 0 0 2px var(--plm-border-gold);
  background: rgba(7, 8, 12, .74);
}

.progress-wrap svg.progress-circle path {
  stroke: var(--plm-gold);
}

.progress-wrap::after {
  color: var(--plm-gold-light);
}

@media (max-width: 1199px) {
  .bd-header-inner {
    min-height: 68px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  h1, .h1, .bd-banner-title {
    font-size: clamp(48px, 15vw, 72px);
  }

  .bd-header-inner {
    padding-inline: 18px;
  }
}

/* Light surface readability
   Several legacy/view pages still use Bootstrap white or light panels/cards. The
   global dark PLM theme makes body text light by default, so force dark ink on
   intentionally light surfaces while leaving the custom dark .bd-card system alone. */
:root {
  --plm-light-ink: #111827;
  --plm-light-body: #374151;
  --plm-light-muted: #6B7280;
  --plm-light-border: #E5E7EB;
}

.bg-white,
.bg-light,
.white-bg,
.light-bg,
.bd-bg-light,
.card:not(.bd-card),
.modal-content,
.dropdown-menu.bg-white,
.list-group-item,
.table,
.table-responsive,
.form-control,
.form-select,
.plm-light-surface,
[class*="bg-white"],
[class*="bg-light"] {
  color: var(--plm-light-body) !important;
}

.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.white-bg h1, .white-bg h2, .white-bg h3, .white-bg h4, .white-bg h5, .white-bg h6,
.light-bg h1, .light-bg h2, .light-bg h3, .light-bg h4, .light-bg h5, .light-bg h6,
.bd-bg-light h1, .bd-bg-light h2, .bd-bg-light h3, .bd-bg-light h4, .bd-bg-light h5, .bd-bg-light h6,
.card:not(.bd-card) h1, .card:not(.bd-card) h2, .card:not(.bd-card) h3,
.card:not(.bd-card) h4, .card:not(.bd-card) h5, .card:not(.bd-card) h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6,
.plm-light-surface h1, .plm-light-surface h2, .plm-light-surface h3,
.plm-light-surface h4, .plm-light-surface h5, .plm-light-surface h6 {
  color: var(--plm-light-ink) !important;
}

.bg-white p, .bg-white li, .bg-white label, .bg-white span:not(.badge), .bg-white small,
.bg-light p, .bg-light li, .bg-light label, .bg-light span:not(.badge), .bg-light small,
.white-bg p, .white-bg li, .white-bg label, .white-bg span:not(.badge), .white-bg small,
.light-bg p, .light-bg li, .light-bg label, .light-bg span:not(.badge), .light-bg small,
.bd-bg-light p, .bd-bg-light li, .bd-bg-light label, .bd-bg-light span:not(.badge), .bd-bg-light small,
.card:not(.bd-card) p, .card:not(.bd-card) li, .card:not(.bd-card) label,
.card:not(.bd-card) span:not(.badge), .card:not(.bd-card) small,
.modal-content p, .modal-content li, .modal-content label, .modal-content span:not(.badge), .modal-content small,
.plm-light-surface p, .plm-light-surface li, .plm-light-surface label,
.plm-light-surface span:not(.badge), .plm-light-surface small {
  color: var(--plm-light-body) !important;
}

.bg-white .text-muted,
.bg-light .text-muted,
.white-bg .text-muted,
.light-bg .text-muted,
.bd-bg-light .text-muted,
.card:not(.bd-card) .text-muted,
.modal-content .text-muted,
.plm-light-surface .text-muted {
  color: var(--plm-light-muted) !important;
}

.bg-white strong, .bg-white b,
.bg-light strong, .bg-light b,
.white-bg strong, .white-bg b,
.light-bg strong, .light-bg b,
.bd-bg-light strong, .bd-bg-light b,
.card:not(.bd-card) strong, .card:not(.bd-card) b,
.modal-content strong, .modal-content b,
.plm-light-surface strong, .plm-light-surface b {
  color: var(--plm-light-ink) !important;
}

.table,
.table th,
.table td,
.table thead th,
.table tbody td {
  color: var(--plm-light-body) !important;
  border-color: var(--plm-light-border) !important;
}

.table thead th,
.table strong,
.table b {
  color: var(--plm-light-ink) !important;
}

.card:not(.bd-card) a:not(.btn),
.bg-light a:not(.btn),
.bg-white a:not(.btn),
.bd-bg-light a:not(.btn),
.plm-light-surface a:not(.btn) {
  color: #8A5A00 !important;
}

.card:not(.bd-card) a:not(.btn):hover,
.bg-light a:not(.btn):hover,
.bg-white a:not(.btn):hover,
.bd-bg-light a:not(.btn):hover,
.plm-light-surface a:not(.btn):hover {
  color: #5F3D00 !important;
}