/* ============================================================
   MIKROM Budget — Product Page CSS
   Theme: Purple / Violet / Indigo
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --budget-purple:   #8b5cf6;
  --budget-purple-d: #7c3aed;
  --budget-violet:   #a855f7;
  --budget-indigo:   #6366f1;
  --budget-blue:     #3b82f6;
  --budget-teal:     #14b8a6;
  --budget-green:    #22c55e;
  --budget-amber:    #f59e0b;

  --budget-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
}

/* ── Primary Button ─────────────────────────────────────── */
.budget-btn--primary {
  background: var(--budget-grad);
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(139,92,246,.35);
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.budget-btn--primary:hover {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,92,246,.45);
}

/* ── Gradient text ──────────────────────────────────────── */
.budget-gradient-text {
  background: var(--budget-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tags ───────────────────────────────────────────────── */
.budget-tag { background: rgba(139,92,246,.12); color: var(--budget-purple); }
.erp-module__tag.budget-tag--purple  { background: rgba(139,92,246,.12); color: var(--budget-purple); }
.erp-module__tag.budget-tag--violet  { background: rgba(168,85,247,.12);  color: var(--budget-violet); }
.erp-module__tag.budget-tag--indigo  { background: rgba(99,102,241,.12);  color: var(--budget-indigo); }
.erp-module__tag.budget-tag--blue    { background: rgba(59,130,246,.12);  color: var(--budget-blue); }
.erp-module__tag.budget-tag--teal    { background: rgba(20,184,166,.12);  color: var(--budget-teal); }
.erp-module__tag.budget-tag--green   { background: rgba(34,197,94,.12);   color: var(--budget-green); }

/* ── Trust badges ───────────────────────────────────────── */
.budget-trust { background: rgba(139,92,246,.12); color: var(--budget-purple); border: 1px solid rgba(139,92,246,.25); }

/* ── Hero ───────────────────────────────────────────────── */
.budget-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
  background: #0d0e14;
}
.budget-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(139,92,246,.15) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 20% 70%, rgba(99,102,241,.1) 0%, transparent 60%);
}
.budget-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.budget-hero__glow.g1 { width: 500px; height: 500px; top: -100px; right: -80px; background: rgba(139,92,246,.18); }
.budget-hero__glow.g2 { width: 350px; height: 350px; bottom: -60px; left: 5%; background: rgba(99,102,241,.12); }

.budget-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Copy side */
.budget-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(139,92,246,.15); color: var(--budget-purple);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 999px; padding: .35rem 1rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.budget-hero__title { font-size: clamp(2.4rem,4.5vw,3.6rem); font-weight: 900; line-height: 1.1; color: #fff; margin-bottom: 1.25rem; }
.budget-hero__sub   { font-size: 1.1rem; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 560px; margin-bottom: 2rem; }
.budget-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.budget-hero__trust {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.budget-hero__trust .trust-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600;
  padding: .35rem .9rem; border-radius: 999px;
}

/* Dashboard mock */
.budget-hero__visual { perspective: 1200px; }
.budget-dashboard-mock {
  transform: rotateY(-8deg) rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform .5s ease;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.3);
}
.budget-dashboard-mock:hover { transform: rotateY(-2deg) rotateX(1deg); }

.budget-dashboard-mock .mock-topbar { background: #1c1d26; padding: .7rem 1rem; display: flex; align-items: center; gap: .5rem; }
.budget-dashboard-mock .mock-title  { font-size: .75rem; color: rgba(255,255,255,.5); margin-left: .5rem; }

.budget-dashboard-mock .mock-body { display: flex; background: #131420; }
.budget-dashboard-mock .mock-sidebar {
  width: 48px; background: #0f1018; padding: .75rem .5rem;
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
}
.budget-dashboard-mock .mock-nav-item {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); font-size: .9rem;
  cursor: pointer; transition: background .15s;
}
.budget-dashboard-mock .mock-nav-item.active { background: rgba(139,92,246,.2); color: var(--budget-purple); }
.budget-dashboard-mock .mock-nav-item:hover  { background: rgba(255,255,255,.06); color: #fff; }

.budget-dashboard-mock .mock-content { flex: 1; padding: 1rem; }

.budget-dashboard-mock .mock-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin-bottom: .75rem;
}
.budget-dashboard-mock .mock-stat {
  background: rgba(255,255,255,.04); border-radius: 8px;
  padding: .5rem .6rem; display: flex; flex-direction: column; gap: .2rem;
}
.budget-dashboard-mock .mock-stat__val { font-size: .85rem; font-weight: 700; color: #fff; }
.budget-dashboard-mock .mock-stat__lbl { font-size: .6rem; color: rgba(255,255,255,.45); }
.budget-val { color: var(--budget-purple) !important; }

.budget-dashboard-mock .mock-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 70px;
  background: rgba(255,255,255,.03); border-radius: 8px; padding: .5rem;
  margin-bottom: .75rem;
}
.budget-dashboard-mock .mock-bar {
  flex: 1; background: rgba(139,92,246,.3); border-radius: 3px;
  transition: background .2s;
}
.budget-bar-active { background: var(--budget-purple) !important; }

.budget-dashboard-mock .mock-rows { display: flex; flex-direction: column; gap: .4rem; }
.budget-dashboard-mock .mock-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.03); border-radius: 6px; padding: .35rem .5rem;
}
.budget-dashboard-mock .mock-row span:last-child { margin-left: auto; }
.budget-dashboard-mock .mock-dot-s {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.budget-dashboard-mock .mock-dot-s.green { background: var(--budget-green); }
.budget-dashboard-mock .mock-dot-s.amber { background: var(--budget-amber); }
.budget-dashboard-mock .mock-badge {
  font-size: .6rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px;
}
.budget-dashboard-mock .mock-badge.green { background: rgba(34,197,94,.15); color: var(--budget-green); }
.budget-dashboard-mock .mock-badge.amber { background: rgba(245,158,11,.15); color: var(--budget-amber); }

/* ── Stats bar ──────────────────────────────────────────── */
.budget-stats { background: #0d0e14; padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.budget-stat strong { color: var(--budget-purple) !important; }

/* ── Feature card icons ─────────────────────────────────── */
.budget-icon--purple { background: rgba(139,92,246,.15); color: var(--budget-purple); }
.budget-icon--violet { background: rgba(168,85,247,.15);  color: var(--budget-violet); }
.budget-icon--indigo { background: rgba(99,102,241,.15);  color: var(--budget-indigo); }
.budget-icon--blue   { background: rgba(59,130,246,.15);  color: var(--budget-blue); }
.budget-icon--teal   { background: rgba(20,184,166,.15);  color: var(--budget-teal); }
.budget-icon--green  { background: rgba(34,197,94,.15);   color: var(--budget-green); }

/* ── Featured pricing card ──────────────────────────────── */
.erp-price-card--budget-featured {
  border-color: var(--budget-purple);
  box-shadow: 0 0 0 2px rgba(139,92,246,.25), 0 20px 60px rgba(139,92,246,.2);
  position: relative;
}
.budget-price-badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--budget-grad);
  color: #fff; font-size: .72rem; font-weight: 700;
  padding: .3rem .9rem; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}

/* ── CTA section ────────────────────────────────────────── */
.budget-cta { position: relative; overflow: hidden; }
.budget-cta__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(139,92,246,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .budget-hero__inner { grid-template-columns: 1fr; }
  .budget-hero__visual { display: none; }
  .budget-hero { min-height: auto; padding: 110px 0 60px; }
}
@media (max-width: 600px) {
  .budget-hero__actions { flex-direction: column; }
  .budget-dashboard-mock .mock-stats { grid-template-columns: repeat(2,1fr); }
}