/* ==========================================================================
   Social Posting Pro — Marketing redesign layer (v1)
   Single source of styles for marketing surfaces. See DESIGN.md.

   Strategy: this file loads LAST. It (a) defines the design tokens,
   (b) ships new sp-* components, and (c) overrides the legacy theme's
   most-visible surfaces (.i-btn, .inner-banner, .section-title, etc.)
   so existing templates inherit the new look with no markup changes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* color */
  --ink-1000:#0E0E10;
  --ink-900:#1B1B1F;
  --ink-700:#3A3A41;
  --ink-500:#6E6E78;
  --ink-300:#C9C9D1;
  --ink-100:#EDEDEF;
  --paper-50:#F7F7F8;
  --paper-0:#FFFFFF;
  --accent-600:#116DFF;
  --accent-700:#0B57D0;
  --accent-50:#E7F0FF;
  --ok-600:#15803D;
  --warn-600:#B45309;
  --danger-600:#B42318;
  --gradient-hero:linear-gradient(120deg,#0E0E10 0%,#1B1B1F 60%,#116DFF 140%);

  /* type stack */
  --font-display:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* type scale */
  --t-display:clamp(56px,6.4vw,96px);
  --t-h1:clamp(40px,4.4vw,64px);
  --t-h2:clamp(30px,2.6vw,40px);
  --t-h3:24px;
  --t-h4:18px;
  --t-lead:22px;
  --t-body:17px;
  --t-small:14px;
  --t-eyebrow:12px;

  /* spacing */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px; --s-11:160px; --s-12:200px;

  /* radius */
  --r-2:8px; --r-3:12px; --r-4:16px; --r-5:24px; --r-pill:999px;

  /* motion */
  --motion-fast:150ms;
  --motion-base:220ms;
  --motion-slow:360ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);

  /* container widths */
  --container-narrow:880px;
  --container:1200px;
  --container-wide:1440px;
}

/* --------------------------------------------------------------------------
   2. Base / element resets (scoped to body to avoid touching dashboards)
   -------------------------------------------------------------------------- */
body {
  font-family:var(--font-text) !important;
  font-size:var(--t-body) !important;
  line-height:1.6 !important;
  color:var(--ink-700) !important;
  background:#FFFFFF !important;
  background-image:none !important;
  background-color:#FFFFFF !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html { background:#FFFFFF !important; }

/* dashboard pages (.user) keep their own theme */
body:has(.dashboard-wrapper) { font-family:var(--font-text) !important; }

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  color:var(--ink-1000);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  text-wrap:balance;
}
h3,h4,h5,h6 { font-weight:600; letter-spacing:-0.01em; line-height:1.25; }

p { color:var(--ink-700); }

a { color:var(--accent-600); text-decoration:none; transition:color var(--motion-fast) var(--ease-out); }
a:hover { color:var(--accent-700); text-decoration:underline; text-underline-offset:4px; }

::selection { background:var(--ink-1000); color:#fff; }

img { max-width:100%; height:auto; }

/* focus rings — never let outline disappear */
*:focus-visible {
  outline:3px solid color-mix(in srgb, var(--accent-600) 30%, transparent);
  outline-offset:2px;
  border-radius:6px;
}


/* --------------------------------------------------------------------------
   3. Section primitives
   -------------------------------------------------------------------------- */
.sp-section {
  padding-block:var(--s-9);
  background:var(--paper-0);
  position:relative;
}
@media (min-width:1024px) {
  .sp-section { padding-block:var(--s-10); }
}
.sp-section--paper { background:var(--paper-50); }
.sp-section--ink   { background:var(--ink-1000); color:#fff; }
.sp-section--ink h1,.sp-section--ink h2,.sp-section--ink h3,.sp-section--ink h4 { color:#fff; }
.sp-section--ink p { color:rgba(255,255,255,.78); }
.sp-section--gradient { background:var(--gradient-hero); color:#fff; }
.sp-section--gradient h1,.sp-section--gradient h2,.sp-section--gradient h3 { color:#fff; }
.sp-section--gradient p { color:rgba(255,255,255,.85); }

.sp-section__head { max-width:760px; margin-bottom:var(--s-7); }
.sp-section__head--center { margin-inline:auto; text-align:center; }

.sp-eyebrow {
  display:inline-block;
  font-family:var(--font-text);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-600);
  margin-bottom:var(--s-4);
}
.sp-section--ink .sp-eyebrow,
.sp-section--gradient .sp-eyebrow { color:#9DB7FF; }

.sp-display { font-size:var(--t-display) !important; line-height:1.02 !important; letter-spacing:-0.03em !important; }
.sp-headline,
.sp-h1 { font-size:var(--t-h1); }
.sp-h2 { font-size:var(--t-h2); }
.sp-h3 { font-size:var(--t-h3); }
.sp-lead {
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--ink-700);
  max-width:60ch;
  margin-block:var(--s-4) 0;
}
.sp-section--ink .sp-lead,
.sp-section--gradient .sp-lead { color:rgba(255,255,255,.85); }

.sp-meta { color:var(--ink-500); font-size:var(--t-small); }


/* --------------------------------------------------------------------------
   4. Buttons (sp- + legacy override)
   -------------------------------------------------------------------------- */
.sp-btn,
.i-btn,
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  height:48px;
  padding:0 24px;
  border-radius:var(--r-pill) !important;
  font-family:var(--font-text);
  font-size:var(--t-body);
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-out),
             box-shadow var(--motion-fast) var(--ease-out),
             background-color var(--motion-fast) var(--ease-out),
             color var(--motion-fast) var(--ease-out),
             border-color var(--motion-fast) var(--ease-out);
  text-decoration:none !important;
  white-space:nowrap;
}
.sp-btn:hover,
.i-btn:hover,
.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion:reduce) {
  .sp-btn,.i-btn,.btn { transition:none; }
  .sp-btn:hover,.i-btn:hover,.btn:hover { transform:none; box-shadow:none; }
}

/* sizes */
.sp-btn--sm,.btn--sm { height:40px; padding:0 18px; font-size:var(--t-small); }
.sp-btn--lg,.btn--lg { height:56px; padding:0 32px; font-size:var(--t-body); }

/* variants */
.sp-btn--ink,
.btn--primary,
.i-btn.btn--primary {
  background:var(--ink-1000) !important;
  color:#fff !important;
  border-color:var(--ink-1000) !important;
}
.sp-btn--ink:hover,
.btn--primary:hover,
.i-btn.btn--primary:hover {
  background:var(--ink-900) !important;
  color:#fff !important;
}

.sp-btn--accent,
.btn--accent {
  background:var(--accent-600) !important;
  color:#fff !important;
  border-color:var(--accent-600) !important;
}
.sp-btn--accent:hover,
.btn--accent:hover {
  background:var(--accent-700) !important;
  border-color:var(--accent-700) !important;
}

.sp-btn--ghost,
.btn--secondary,
.btn--white {
  background:transparent !important;
  color:var(--ink-1000) !important;
  border-color:var(--ink-1000) !important;
}
.sp-section--ink .sp-btn--ghost,
.sp-section--gradient .sp-btn--ghost,
.sp-section--ink .btn--white,
.sp-section--gradient .btn--white {
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.4) !important;
}
.sp-btn--ghost:hover,
.btn--secondary:hover,
.btn--white:hover {
  background:var(--ink-1000) !important;
  color:#fff !important;
}

.capsuled,
.btn.capsuled { border-radius:var(--r-pill) !important; }


/* --------------------------------------------------------------------------
   5. Header / nav (legacy override)
   -------------------------------------------------------------------------- */
.header {
  background:var(--paper-0) !important;
  border-bottom:1px solid var(--ink-100) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.header.sticky,
.header.fixed,
.header.scrolled {
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:saturate(180%) blur(12px) !important;
  border-bottom-color:transparent !important;
  box-shadow:0 6px 24px -12px rgba(15,23,42,.12) !important;
}
.header-area,
.header-wrapper { min-height:72px; }

.menu-link,
.header .nav-link,
.header a {
  color:var(--ink-700) !important;
  font-family:var(--font-text);
  font-weight:500;
  font-size:15px;
  letter-spacing:-0.005em;
  position:relative;
  transition:color var(--motion-fast) var(--ease-out);
}
.menu-link:hover,
.header .nav-link:hover,
.header a:not(.i-btn):not(.btn):hover {
  color:var(--ink-1000) !important;
  text-decoration:none !important;
}
.menu-link.active,
.header .nav-link.active { color:var(--ink-1000) !important; }

.menu-item { padding-inline:var(--s-3); }
.menu-link::after {
  content:"";
  position:absolute;
  left:50%; bottom:-6px;
  width:0; height:2px;
  background:var(--accent-600);
  transition:width var(--motion-base) var(--ease-out), left var(--motion-base) var(--ease-out);
}
.menu-link:hover::after,
.menu-link.active::after { width:100%; left:0; }


/* --------------------------------------------------------------------------
   5a. Header polish
   -------------------------------------------------------------------------- */
.header-container {
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--s-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:var(--s-5);
}
.header-logo img,
.mobile-logo-wrap img { max-height:32px; width:auto; }

.menu-list {
  display:flex !important;
  align-items:center;
  gap:var(--s-2);
  list-style:none;
  margin:0;
  padding:0;
}
.menu-list .menu-item { padding:0; }
.menu-list .menu-link {
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 var(--s-3) !important;
  border-radius:var(--r-2);
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--ink-700) !important;
  text-decoration:none !important;
  position:relative;
}

.nav-right { gap:var(--s-3) !important; }

/* language + currency switchers */
.lang--toggle,
.custom--toggle {
  background:transparent !important;
  border:0 !important;
  padding:8px 10px !important;
  border-radius:var(--r-2) !important;
  font-family:var(--font-text);
  font-size:14px;
  font-weight:500;
  color:var(--ink-700) !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  transition:background-color var(--motion-fast) var(--ease-out);
}
.lang--toggle:hover,
.custom--toggle:hover { background:var(--paper-50) !important; color:var(--ink-1000) !important; }
.lang--toggle img {
  width:18px !important;
  height:18px !important;
  border-radius:var(--r-pill);
  object-fit:cover;
}

.dropdown-menu {
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-3) !important;
  box-shadow:0 12px 32px -16px rgba(15,23,42,.2) !important;
  padding:6px !important;
  min-width:180px;
  background:var(--paper-0) !important;
  margin-top:8px !important;
}
.dropdown-item {
  border-radius:var(--r-2) !important;
  padding:10px 12px !important;
  font-size:14px !important;
  color:var(--ink-700) !important;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background:var(--paper-50) !important;
  color:var(--ink-1000) !important;
}
.dropdown-item img { width:18px; height:18px; border-radius:var(--r-pill); object-fit:cover; }

.dropdown-menu-title {
  padding:12px;
  border-bottom:1px solid var(--ink-100);
  margin-bottom:4px;
}
.dropdown-menu-title h6 {
  font-size:13px !important;
  color:var(--ink-500) !important;
  font-weight:500 !important;
  margin:0 !important;
}
.dropdown-menu-title .user-name { color:var(--ink-1000); font-weight:600; }

/* profile dropdown */
.profile-btn {
  width:40px; height:40px;
  border-radius:var(--r-pill);
  background:var(--paper-50) !important;
  border:1px solid var(--ink-100);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-1000) !important;
  cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-out);
}
.profile-btn:hover { background:var(--ink-100) !important; }
.profile-btn::after { display:none !important; }

/* mobile + theme toggle buttons */
.mobile-menu-btn {
  width:40px; height:40px;
  border-radius:var(--r-2);
  border:1px solid var(--ink-100);
  background:var(--paper-0);
  color:var(--ink-1000);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-out);
}
.mobile-menu-btn:hover { background:var(--paper-50); }
.mobile-menu-btn i { font-size:18px; }


/* --------------------------------------------------------------------------
   6. Inner-banner / breadcrumb hero (legacy override)
   -------------------------------------------------------------------------- */
.inner-banner {
  background:var(--paper-50) !important;
  padding-block:var(--s-10) var(--s-8) !important;
  position:relative;
  overflow:hidden;
}
.inner-banner-wrapper { position:relative; z-index:1; }
.inner-banner-img {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.18;
}
.inner-banner-img img {
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.6) contrast(1.05);
}
.inner-banner-content {
  text-align:left !important;
  max-width:760px;
  margin:0 !important;
  padding-block:var(--s-7);
}
.inner-banner-content h2 {
  font-size:var(--t-h1) !important;
  color:var(--ink-1000) !important;
  margin-bottom:var(--s-4) !important;
}
.inner-banner-content p {
  font-size:var(--t-lead) !important;
  color:var(--ink-700) !important;
  max-width:60ch;
}

.breadcrumb-wrapper {
  background:transparent !important;
  border:0 !important;
  margin-top:var(--s-5) !important;
  padding:0 !important;
}
.breadcrumb-wrapper .shape-one,
.breadcrumb-wrapper .shape-two { display:none !important; }
.breadcrumb {
  background:transparent !important;
  padding:0 !important;
  font-size:var(--t-small);
  color:var(--ink-500);
}
.breadcrumb-item a { color:var(--ink-500) !important; text-decoration:none !important; }
.breadcrumb-item a:hover { color:var(--ink-1000) !important; }
.breadcrumb-item.active { color:var(--ink-1000) !important; }
.breadcrumb-item + .breadcrumb-item::before {
  content:"/" !important;
  color:var(--ink-300) !important;
  padding:0 var(--s-2) !important;
}


/* --------------------------------------------------------------------------
   7. Cards (legacy override + sp-card)
   -------------------------------------------------------------------------- */
.sp-card,
.feature-card,
.service-card,
.why-us-card,
.template-card,
.team-card,
.blog-card,
.plan-card,
.testimonial-card {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  padding:var(--s-6) !important;
  box-shadow:none !important;
  transition:transform var(--motion-base) var(--ease-out),
             box-shadow var(--motion-base) var(--ease-out),
             border-color var(--motion-base) var(--ease-out);
}
.sp-card:hover,
.feature-card:hover,
.service-card:hover,
.why-us-card:hover,
.template-card:hover,
.team-card:hover,
.blog-card:hover,
.plan-card:hover,
.testimonial-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px -10px rgba(15,23,42,.18) !important;
  border-color:var(--ink-300) !important;
}

.sp-card__title,
.feature-card .title,
.service-card .title,
.blog-card .title { font-size:var(--t-h3); margin-bottom:var(--s-3); }


/* --------------------------------------------------------------------------
   8. Pricing (legacy override)
   -------------------------------------------------------------------------- */
.plan-card,
.price-card,
.pricing-card {
  display:flex !important;
  flex-direction:column !important;
  gap:var(--s-4) !important;
  height:100% !important;
}
.plan-card .price,
.price-amount,
.plan-amount {
  font-family:var(--font-display) !important;
  font-size:var(--t-h1) !important;
  font-weight:700 !important;
  color:var(--ink-1000) !important;
  letter-spacing:-0.02em;
  line-height:1;
}
.plan-card.featured,
.plan-card.popular,
.plan-card.is-featured {
  background:var(--ink-1000) !important;
  color:#fff !important;
}
.plan-card.featured *,
.plan-card.popular *,
.plan-card.is-featured * { color:inherit !important; }
.plan-card.featured .price,
.plan-card.popular .price,
.plan-card.is-featured .price { color:#fff !important; }
@media (min-width:1024px) {
  .plan-card.featured,
  .plan-card.popular,
  .plan-card.is-featured { transform:scale(1.02); }
}


/* --------------------------------------------------------------------------
   9. Forms (legacy override)
   -------------------------------------------------------------------------- */
.form-control,
.form__field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family:var(--font-text) !important;
  font-size:var(--t-body) !important;
  color:var(--ink-1000) !important;
  background:var(--paper-0) !important;
  border:1.5px solid var(--ink-300) !important;
  border-radius:var(--r-3) !important;
  padding:14px 16px !important;
  height:auto !important;
  min-height:52px;
  box-shadow:none !important;
  transition:border-color var(--motion-fast) var(--ease-out),
             box-shadow var(--motion-fast) var(--ease-out);
}
textarea { min-height:140px; }
.form-control:focus,
.form__field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color:var(--ink-1000) !important;
  outline:3px solid color-mix(in srgb, var(--accent-600) 30%, transparent) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

.form__label,
label {
  font-family:var(--font-text);
  font-weight:500;
  color:var(--ink-700);
}


/* --------------------------------------------------------------------------
   10. Contact section (template-specific overrides)
   -------------------------------------------------------------------------- */
.contact { background:var(--paper-0); }

.contact-wrapper.linear-bg,
.existing-customer.linear-bg {
  background:var(--paper-50) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-5) !important;
  padding:var(--s-7) !important;
  color:var(--ink-700) !important;
  box-shadow:none !important;
}
.existing-customer h5 {
  font-size:var(--t-h2) !important;
  color:var(--ink-1000) !important;
  margin-bottom:var(--s-2);
}
.existing-customer p { color:var(--ink-700) !important; max-width:60ch; }

.contact-left-img {
  border-radius:var(--r-4);
  overflow:hidden;
  margin-bottom:var(--s-5);
}
.contact-left-img img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.contact-list {
  list-style:none;
  padding:0;
  margin:var(--s-5) 0 0;
  display:grid;
  gap:var(--s-4);
}
.contact-list li {
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  color:var(--ink-700);
  border-top:1px solid var(--ink-100);
  padding-top:var(--s-4);
}
.contact-list li:first-child { border-top:0; padding-top:0; }
.contact-list li > span {
  display:inline-flex;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  background:var(--paper-0);
  border:1px solid var(--ink-100);
  border-radius:var(--r-3);
  color:var(--ink-1000);
  flex-shrink:0;
}
.contact-list li a { color:var(--ink-1000); font-weight:500; }

.contact-form-wrapper { padding:var(--s-7); border-radius:var(--r-5); background:var(--paper-0); border:1px solid var(--ink-100); }
.contact-form h4 { font-size:var(--t-h2); margin-bottom:var(--s-5); }


/* --------------------------------------------------------------------------
   11. Service / page rich content (overrides legacy chaos)
   -------------------------------------------------------------------------- */
.service-rich-content {
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--ink-700);
  max-width:none;
}
.service-rich-content > * + * { margin-top:var(--s-5); }
.service-rich-content h1,
.service-rich-content h2 { font-size:var(--t-h1); margin-top:var(--s-9); margin-bottom:var(--s-4); }
.service-rich-content h3 { font-size:var(--t-h2); margin-top:var(--s-8); margin-bottom:var(--s-4); }
.service-rich-content h4 { font-size:var(--t-h3); margin-top:var(--s-6); margin-bottom:var(--s-3); }
.service-rich-content p,
.service-rich-content ul,
.service-rich-content ol { max-width:65ch; }
.service-rich-content img {
  border-radius:var(--r-4);
  margin-block:var(--s-6);
}
.service-rich-content ul li,
.service-rich-content ol li { margin-bottom:var(--s-2); }

/* kill any inline styles previous SMM content used (gradient cards,
   purple pills, etc.) — flatten everything into the system. */
.service-rich-content [style*="background"],
.service-rich-content [style*="gradient"] {
  background:var(--paper-50) !important;
  color:var(--ink-700) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
}
.service-rich-content [style*="background"] h1,
.service-rich-content [style*="background"] h2,
.service-rich-content [style*="background"] h3,
.service-rich-content [style*="gradient"] h1,
.service-rich-content [style*="gradient"] h2,
.service-rich-content [style*="gradient"] h3 { color:var(--ink-1000) !important; }
.service-rich-content [style*="background"] p,
.service-rich-content [style*="gradient"] p { color:var(--ink-700) !important; }


/* --------------------------------------------------------------------------
   12. Footer — clean ink footer (DESIGN.md §7.7)
   -------------------------------------------------------------------------- */
.sp-footer {
  background:var(--ink-1000);
  color:rgba(255,255,255,.72);
  font-family:var(--font-text);
  padding-block:var(--s-9) 0;
}
@media (min-width:1024px) {
  .sp-footer { padding-block:var(--s-10) 0; }
}

.sp-footer__inner {
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--s-5);
}
@media (min-width:1024px) {
  .sp-footer__inner { padding:0 var(--s-6); }
}

.sp-footer__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-7) var(--s-7);
}
@media (min-width:768px) {
  .sp-footer__grid {
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (min-width:1024px) {
  .sp-footer__grid {
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:var(--s-7) var(--s-8);
  }
}

/* brand column */
.sp-footer__brand { max-width:360px; }
.sp-footer__logo {
  display:inline-block;
  margin-bottom:var(--s-5);
}
.sp-footer__logo img {
  max-height:32px;
  width:auto;
}
.sp-footer__tagline {
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.65);
  margin:0 0 var(--s-5);
  max-width:42ch;
}
.sp-footer__contact { display:flex; flex-direction:column; gap:8px; }
.sp-footer__contact a {
  font-size:14px;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color var(--motion-fast) var(--ease-out);
}
.sp-footer__contact a:hover { color:#fff; }

/* link columns */
.sp-footer__col { min-width:0; }
.sp-footer__heading {
  font-family:var(--font-text);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:0 0 var(--s-5);
}
.sp-footer__list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.sp-footer__list a {
  display:inline-block;
  font-size:14px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color var(--motion-fast) var(--ease-out);
  line-height:1.4;
}
.sp-footer__list a:hover { color:#fff; text-decoration:none; }

/* sub-footer */
.sp-footer__bottom {
  margin-top:var(--s-9);
  padding:var(--s-5) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.sp-footer__copy {
  font-size:13px;
  color:rgba(255,255,255,.5);
  margin:0;
  letter-spacing:0;
}


/* --------------------------------------------------------------------------
   13. Banner / hero on home (legacy .banner override)
   -------------------------------------------------------------------------- */
.banner,
.hero,
.main-banner {
  background:var(--paper-50) !important;
  padding-block:var(--s-10) !important;
  position:relative;
  overflow:hidden;
}
.banner-content,
.hero-content {
  text-align:left !important;
  max-width:none !important;
  margin:0 !important;
}
.banner-content h1,
.banner h1,
.hero h1 {
  font-size:var(--t-display) !important;
  line-height:1.02 !important;
  letter-spacing:-0.03em !important;
  color:var(--ink-1000) !important;
  margin-bottom:var(--s-5) !important;
  max-width:18ch;
}
.banner-content p,
.banner p,
.hero p {
  font-size:var(--t-lead) !important;
  color:var(--ink-700) !important;
  max-width:55ch;
  margin-bottom:var(--s-7) !important;
}


/* --------------------------------------------------------------------------
   14. Section title legacy override
   -------------------------------------------------------------------------- */
.section-title { margin-bottom:var(--s-7) !important; max-width:760px; }
.section-title h2,
.section-title h3 {
  font-size:var(--t-h1) !important;
  color:var(--ink-1000) !important;
  margin-bottom:var(--s-3) !important;
}
.section-title p { font-size:var(--t-lead) !important; color:var(--ink-700) !important; max-width:60ch; }
.section-title.text-center { text-align:left !important; margin-inline:0 !important; }
@media (min-width:1024px) {
  .section-title.text-center { text-align:center !important; margin-inline:auto !important; }
}
.section-title.light h2,
.section-title.light h3 { color:var(--ink-1000) !important; }
.section-title.light p { color:var(--ink-700) !important; }


/* --------------------------------------------------------------------------
   15. Misc legacy fixes
   -------------------------------------------------------------------------- */
/* kill the linear-bg purple/teal gradients sprinkled across the legacy theme */
.linear-bg,
.gradient-bg,
.bg-gradient {
  background:var(--paper-50) !important;
  color:var(--ink-700) !important;
}
.linear-bg h1,.linear-bg h2,.linear-bg h3,.linear-bg h4,.linear-bg h5 { color:var(--ink-1000) !important; }
.linear-bg p { color:var(--ink-700) !important; }
.linear-bg.existing-customer { background:var(--ink-1000) !important; color:#fff !important; }
.linear-bg.existing-customer h1,.linear-bg.existing-customer h2,.linear-bg.existing-customer h3,
.linear-bg.existing-customer h4,.linear-bg.existing-customer h5 { color:#fff !important; }
.linear-bg.existing-customer p { color:rgba(255,255,255,.85) !important; }

/* preloader subtler */
.preloader { background:var(--paper-0) !important; }

/* container max-widths align with system */
@media (min-width:1200px) {
  .container { max-width:1200px !important; }
}

/* kill legacy decorative SVG noise around section titles */
.section-title .shape,
.banner .shape,
.banner .shape-1,
.banner .shape-2,
.inner-banner .shape,
.inner-banner .shape-one,
.inner-banner .shape-two { display:none !important; }


/* --------------------------------------------------------------------------
   15z. Legacy home-section overrides (about/feature/service/why-us/team/etc)
   These rewrite the visual treatment of every legacy `*-section` block to
   match the design system without rewriting each blade.
   -------------------------------------------------------------------------- */

/* shared section-title-one + subtitle pattern */
.section-title-one,
.section-title {
  margin-bottom:var(--s-7) !important;
  max-width:760px;
}
.section-title-one.text-center,
.section-title.text-center { margin-inline:auto; text-align:center; }

.section-title-one .subtitle,
.section-title .subtitle,
.subtitle {
  display:inline-block;
  font-family:var(--font-text);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-600) !important;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  margin-bottom:var(--s-3) !important;
}

.section-title-one h2,
.section-title-one h3,
.section-title h2,
.section-title h3 {
  font-family:var(--font-display);
  font-size:var(--t-h1) !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
  line-height:1.05 !important;
  color:var(--ink-1000) !important;
  margin-bottom:var(--s-3) !important;
  text-wrap:balance;
}
.section-title-one h2 span,
.section-title-one h3 span,
.section-title h2 span,
.section-title h3 span { color:var(--accent-600) !important; }

.section-title-one p,
.section-title p {
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--ink-700) !important;
  max-width:60ch;
  margin:0;
}

/* universal section padding alignment — kill the legacy mb-110/pb-110 sizes
   and apply the system spacing instead */
.about-section,.feature-section,.power-feature-section,.serivce-section,
.service-section,.choose,.team-section,.template-section,.pricing-plan,
.reviews,.blog-section,.faq-section,.banner-section {
  padding-block:var(--s-9) !important;
}
@media (min-width:1024px){
  .about-section,.feature-section,.power-feature-section,.serivce-section,
  .service-section,.choose,.team-section,.template-section,.pricing-plan,
  .reviews,.blog-section,.faq-section,.banner-section {
    padding-block:var(--s-10) !important;
  }
}
/* alternating section backgrounds — gives visual rhythm */
.about-section { background:var(--paper-0); }
.feature-section { background:var(--paper-50); }
.power-feature-section { background:var(--paper-0); }
.serivce-section,.service-section { background:var(--paper-50); }
.template-section { background:var(--paper-0); }
.choose { background:var(--paper-50); }
.team-section { background:var(--paper-0); }
.pricing-plan { background:var(--paper-50); }
.reviews { background:var(--paper-0); }
.blog-section { background:var(--paper-50); }
.faq-section { background:var(--paper-0); }


/* about ----------------------------------------------------------- */
.about-card-wrapper {
  position:relative;
  display:grid;
  gap:0;
  background:var(--paper-0);
  border:1px solid var(--ink-100);
  border-radius:var(--r-5);
  padding:var(--s-5);
}
.about-card-wrapper .center-icon { display:none !important; }
.about-card-wrapper .row { --bs-gutter-x:0; --bs-gutter-y:0; }
.about-card-item {
  padding:var(--s-6);
  border:0 !important;
  background:transparent !important;
  border-radius:var(--r-4);
  transition:background-color var(--motion-fast) var(--ease-out);
}
.about-card-item:hover { background:var(--paper-50) !important; }
.about-card-item .icon {
  width:48px; height:48px;
  border-radius:var(--r-3);
  background:var(--paper-50);
  border:1px solid var(--ink-100);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--s-4);
  color:var(--ink-1000);
  font-size:20px;
}
.about-card-item .icon i { color:var(--ink-1000); }
.about-card-item .content h4 {
  font-size:var(--t-h3) !important;
  margin-bottom:var(--s-2) !important;
  color:var(--ink-1000) !important;
}
.about-card-item .content p {
  color:var(--ink-700) !important;
  font-size:var(--t-body) !important;
  margin:0;
}

/* counter (about) */
.counter-wrapper {
  margin-top:var(--s-7);
  padding-top:var(--s-7);
  border-top:1px solid var(--ink-100);
}
.counter-single { text-align:left !important; }
.counter-single .counter-text { align-items:flex-start !important; }
.counter-single h3 {
  font-family:var(--font-display) !important;
  font-size:48px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
  color:var(--ink-1000) !important;
  margin:0 !important;
  line-height:1;
}
.counter-single .bi-plus-lg { color:var(--accent-600); font-size:24px; }
.counter-single p {
  font-size:var(--t-small) !important;
  color:var(--ink-500) !important;
  margin:var(--s-2) 0 0 !important;
}

/* powerful feature ------------------------------------------------ */
.power-feature-list {
  list-style:none !important;
  padding:0 !important;
  margin:var(--s-5) 0 0 !important;
  display:grid;
  gap:var(--s-3);
}
.power-feature-list li {
  display:flex !important;
  align-items:flex-start;
  gap:var(--s-3);
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  font-size:var(--t-body);
  color:var(--ink-700);
}
.power-feature-list li .bi-patch-check-fill {
  color:var(--accent-600);
  font-size:20px;
  flex-shrink:0;
  margin-top:2px;
}
.power-feature-section .rounded-5,
.power-feature-section img {
  border-radius:var(--r-5) !important;
  width:100%;
  aspect-ratio:6/5;
  object-fit:cover;
  display:block;
  border:1px solid var(--ink-100);
}

/* service section nav-tabs (style-7) ----------------------------- */
.nav-tabs.style-7 {
  border:0 !important;
  display:inline-flex !important;
  background:var(--paper-0);
  border:1px solid var(--ink-100);
  border-radius:var(--r-pill);
  padding:6px;
  gap:4px;
}
.nav-tabs.style-7 .nav-item { margin:0; }
.nav-tabs.style-7 .nav-link {
  border:0 !important;
  border-radius:var(--r-pill) !important;
  padding:8px 18px !important;
  font-family:var(--font-text);
  font-size:14px;
  font-weight:500;
  color:var(--ink-700) !important;
  background:transparent !important;
  transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);
}
.nav-tabs.style-7 .nav-link.active {
  background:var(--ink-1000) !important;
  color:#fff !important;
}
.nav-tabs.style-7 .nav-link:hover { color:var(--ink-1000) !important; background:var(--paper-50) !important; }
.nav-tabs.style-7 .nav-link.active:hover { color:#fff !important; background:var(--ink-1000) !important; }

.serivce-section .rounded-4,
.service-section .rounded-4 {
  border-radius:var(--r-5) !important;
  border:1px solid var(--ink-100);
  overflow:hidden;
}
.serivce-section .rounded-4 img,
.service-section .rounded-4 img { display:block; width:100%; }


/* why-us / choose ------------------------------------------------- */
.choose-card {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  padding:var(--s-6) !important;
  height:100%;
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out);
}
.choose-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px -10px rgba(15,23,42,.18);
  border-color:var(--ink-300) !important;
}
.choose-card-icon {
  width:48px; height:48px;
  border-radius:var(--r-3);
  background:var(--accent-50);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--accent-700);
  margin-bottom:var(--s-4);
}
.choose-card h3,.choose-card h4,.choose-card .title {
  font-size:var(--t-h3) !important;
  margin-bottom:var(--s-2) !important;
  color:var(--ink-1000) !important;
}
.choose-card p { color:var(--ink-700) !important; }


/* pricing --------------------------------------------------------- */
.pricing-plan .col-lg-6.d-flex.justify-content-end { justify-content:flex-end !important; }
.pricing-plan .i-btn.btn--white {
  background:transparent !important;
  color:var(--ink-1000) !important;
  border:1.5px solid var(--ink-1000) !important;
}
.pricing-plan .i-btn.btn--white:hover { background:var(--ink-1000) !important; color:#fff !important; }


/* team ------------------------------------------------------------ */
.team-item {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  overflow:hidden;
  text-align:center;
  padding:0 !important;
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out);
}
.team-item:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px -10px rgba(15,23,42,.18);
}
.team-item img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.team-item .content,
.team-item .team-content { padding:var(--s-5); }
.team-item h4,.team-item .name {
  font-size:var(--t-h3) !important;
  color:var(--ink-1000) !important;
  margin-bottom:4px !important;
}
.team-item p,.team-item .role,.team-item .designation {
  color:var(--ink-500) !important;
  font-size:var(--t-small) !important;
  margin:0 !important;
}


/* templates ------------------------------------------------------- */
.template-item {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  overflow:hidden;
  height:100%;
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out);
}
.template-item:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px -10px rgba(15,23,42,.18);
}
.template-item img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.template-item .content,
.template-item .template-content { padding:var(--s-5); }
.template-item .category {
  font-size:var(--t-eyebrow) !important;
  font-weight:600 !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase;
  color:var(--accent-600) !important;
  margin-bottom:var(--s-2) !important;
}
.template-item .icon { display:none !important; } /* legacy decorative blob */
.template-item h3,.template-item .title {
  font-size:var(--t-h4) !important;
  color:var(--ink-1000) !important;
  margin:0 !important;
}
.radius-one,.radius-two { display:none !important; } /* legacy blob shapes */


/* testimonials --------------------------------------------------- */
.review-wrapper { background:var(--paper-50); border:1px solid var(--ink-100); border-radius:var(--r-5); overflow:hidden; }
.review-card {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  padding:var(--s-6) !important;
  position:relative;
}
.review-content p {
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:500;
  line-height:1.4;
  color:var(--ink-1000);
  letter-spacing:-0.01em;
  margin:0 0 var(--s-5);
}
.reviewer-meta { display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--ink-100); }
.reviewer-meta img { width:48px; height:48px; border-radius:var(--r-pill); object-fit:cover; }
.reviewer-meta h5,.reviewer-meta .name {
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ink-1000) !important;
  margin:0 !important;
}
.reviewer-meta p,.reviewer-meta .role {
  font-size:13px !important;
  color:var(--ink-500) !important;
  margin:0 !important;
}
.review-rating { color:#F59E0B; }
.quote-icon { display:none !important; }

.review-button-next,
.review-button-prev {
  width:44px !important; height:44px !important;
  border-radius:var(--r-pill) !important;
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  color:var(--ink-1000) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);
}
.review-button-next:hover,
.review-button-prev:hover { background:var(--ink-1000) !important; color:#fff !important; }


/* FAQ accordion -------------------------------------------------- */
.faq-wrap,.faq-wrap-two { background:transparent; }
.accordion-item {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-3) !important;
  margin-bottom:var(--s-3) !important;
  overflow:hidden;
}
.accordion-button {
  font-family:var(--font-display) !important;
  font-size:18px !important;
  font-weight:600 !important;
  color:var(--ink-1000) !important;
  background:var(--paper-0) !important;
  padding:var(--s-5) var(--s-6) !important;
  border:0 !important;
  box-shadow:none !important;
  letter-spacing:-0.01em;
}
.accordion-button:not(.collapsed) {
  background:var(--paper-0) !important;
  color:var(--ink-1000) !important;
  border-bottom:1px solid var(--ink-100) !important;
}
.accordion-button::after {
  filter:grayscale(1) contrast(0);
  opacity:.6;
}
.accordion-body {
  padding:var(--s-5) var(--s-6) !important;
  font-size:var(--t-body) !important;
  color:var(--ink-700) !important;
  line-height:1.65;
}
.accordion-body p { color:var(--ink-700) !important; }


/* blog teaser cards in blog-section ------------------------------- */
.blog-section .blog-card,
.blog-section .blog-item {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out);
}
.blog-section .blog-card:hover,
.blog-section .blog-item:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px -10px rgba(15,23,42,.18);
}
.blog-section .blog-card img,
.blog-section .blog-item img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.blog-section .blog-card .content,
.blog-section .blog-item .content,
.blog-section .blog-card .blog-content,
.blog-section .blog-item .blog-content { padding:var(--s-5); flex:1; display:flex; flex-direction:column; gap:var(--s-3); }
.blog-section h3,.blog-section .title { font-size:var(--t-h4) !important; color:var(--ink-1000) !important; line-height:1.3 !important; }
.blog-section .meta,.blog-section .blog-meta,.blog-section .date { font-size:13px; color:var(--ink-500); }


/* btn--dark legacy variant -> ink */
.btn--dark,
.i-btn.btn--dark {
  background:var(--ink-1000) !important;
  color:#fff !important;
  border-color:var(--ink-1000) !important;
}
.btn--dark:hover,
.i-btn.btn--dark:hover { background:var(--ink-900) !important; }


/* kill leftover decorative chrome */
.banner-section .vector-left,
.banner-section .vector-right,
.banner-section .sponsors-area .vector-left,
.banner-section .sponsors-area .vector-right { display:none !important; }
.circle-container,
.circleButton { display:none !important; }


/* --------------------------------------------------------------------------
   15a. Home hero (sp-hero)
   -------------------------------------------------------------------------- */
.sp-hero {
  background:var(--paper-0);
  padding-block:var(--s-9) var(--s-9);
  position:relative;
  overflow:hidden;
}
@media (min-width:1024px) {
  .sp-hero { padding-block:var(--s-11) var(--s-10); }
}
.sp-hero__copy { max-width:560px; }
.sp-hero__copy .sp-eyebrow { color:var(--accent-600); }
.sp-hero__headline {
  font-family:var(--font-display);
  font-size:var(--t-display);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.02;
  color:var(--ink-1000);
  margin:var(--s-4) 0 var(--s-5);
  text-wrap:balance;
}
.sp-hero__headline span { color:var(--accent-600); }
.sp-hero__headline img { display:none; } /* kill legacy inline title-vector image */
.sp-hero__lead {
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--ink-700);
  max-width:52ch;
  margin:0 0 var(--s-7);
}
.sp-hero__cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
}
.sp-hero__visual {
  position:relative;
  border-radius:var(--r-5);
  overflow:hidden;
  background:linear-gradient(135deg, var(--paper-50), #FFFFFF);
  box-shadow:0 30px 80px -30px rgba(15,23,42,.25);
}
.sp-hero__visual img {
  width:100%;
  height:auto;
  aspect-ratio:5/4;
  object-fit:cover;
  display:block;
}
@media (min-width:1024px) {
  .sp-hero__visual img { aspect-ratio:6/5; }
}
.sp-hero__logos {
  margin-top:var(--s-9);
  padding-top:var(--s-7);
  border-top:1px solid var(--ink-100);
}
.sp-hero__logos-label {
  display:block;
  margin-bottom:var(--s-5);
  color:var(--ink-500);
}
.sp-hero__logo {
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  filter:grayscale(1);
  opacity:.65;
  transition:opacity var(--motion-base) var(--ease-out);
}
.sp-hero__logo:hover { opacity:1; }
.sp-hero__logo img { max-height:40px; width:auto; object-fit:contain; }


/* --------------------------------------------------------------------------
   16. Dashboard layer (admin + user)
   Applies to /admin/* and /user/* surfaces. Targets the existing layout
   classes from main.css/dashboard.css and rewrites them to system.
   -------------------------------------------------------------------------- */

/* sidebar — SCOPED to dashboards only (admin/user). The marketing header
   also wraps its menu in <div class="sidebar">, so we must not leak. */
.dashboard-wrapper .sidebar,
.main-wrapper .sidebar,
.admin-wrapper .sidebar,
.dashboard-sidebar,
.side-bar {
  background:var(--ink-1000) !important;
  color:rgba(255,255,255,.78) !important;
  border-right:0 !important;
}
.dashboard-wrapper .sidebar a,
.main-wrapper .sidebar a,
.admin-wrapper .sidebar a,
.dashboard-sidebar a,
.side-bar a,
.dashboard-wrapper .sidebar-menu a,
.dashboard-wrapper .sidebar-menu-item a {
  color:rgba(255,255,255,.78) !important;
  font-family:var(--font-text);
  font-weight:500;
  font-size:14px;
  letter-spacing:-0.005em;
  border-radius:var(--r-2);
  transition:background-color var(--motion-fast) var(--ease-out),
             color var(--motion-fast) var(--ease-out);
}
.dashboard-wrapper .sidebar a:hover,
.main-wrapper .sidebar a:hover,
.admin-wrapper .sidebar a:hover,
.dashboard-sidebar a:hover,
.side-bar a:hover {
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.dashboard-wrapper .sidebar a.active,
.dashboard-wrapper .sidebar-menu-item.active a,
.dashboard-wrapper .sidebar-menu-item a.active,
.main-wrapper .sidebar a.active,
.admin-wrapper .sidebar a.active,
.dashboard-sidebar .active,
.side-bar .active {
  background:rgba(17,109,255,.16) !important;
  color:#fff !important;
}
.dashboard-wrapper .sidebar-menu-item.active a::before,
.dashboard-wrapper .sidebar a.active::before {
  content:""; width:3px; height:18px;
  background:var(--accent-600);
  border-radius:2px;
  margin-right:10px;
}

/* sidebar logo zone — scoped */
.dashboard-wrapper .sidebar .logo,
.main-wrapper .sidebar .logo,
.admin-wrapper .sidebar .logo,
.sidebar-logo,
.dashboard-sidebar .logo,
.side-bar .logo {
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  padding:var(--s-5) !important;
}

/* dashboard topbar / header */
.dashboard-header,
.topbar,
.admin-header,
.user-header,
.dashboard-wrapper > .header,
.main-wrapper > .topbar {
  background:var(--paper-0) !important;
  border-bottom:1px solid var(--ink-100) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  height:64px;
}
.dashboard-header *,
.topbar *,
.admin-header * { font-family:var(--font-text); }

/* dashboard main area */
.dashboard-wrapper,
.main-content,
.main-wrapper,
.content-wrapper,
.admin-wrapper {
  background:var(--paper-50) !important;
  font-family:var(--font-text) !important;
  color:var(--ink-700) !important;
}

/* dashboard cards */
.dashboard-card,
.stat-card,
.card,
.box,
.widget,
.dashboard-box,
.info-card {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  box-shadow:none !important;
  padding:var(--s-5);
}
.dashboard-card:hover,
.stat-card:hover { box-shadow:0 4px 16px -8px rgba(15,23,42,.12) !important; }

.card-header,
.card-title {
  background:transparent !important;
  border-bottom:1px solid var(--ink-100) !important;
  padding:var(--s-4) var(--s-5) !important;
  font-family:var(--font-display);
  font-weight:600 !important;
  color:var(--ink-1000) !important;
  font-size:var(--t-h4);
  letter-spacing:-0.01em;
}
.card-body { padding:var(--s-5) !important; }

/* stat numbers */
.stat-value,
.dashboard-stat-value,
.stat-card .number,
.stat-card .value,
.statistic-value {
  font-family:var(--font-display) !important;
  font-size:var(--t-h1) !important;
  font-weight:700 !important;
  color:var(--ink-1000) !important;
  letter-spacing:-0.02em;
  line-height:1;
}
.stat-label,
.dashboard-stat-label,
.statistic-label {
  font-family:var(--font-text);
  font-size:var(--t-small);
  color:var(--ink-500) !important;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
}

/* tables — DataTables + plain */
table,
.table,
.dataTable {
  font-family:var(--font-text) !important;
  font-size:14px;
  color:var(--ink-700) !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100% !important;
}
.table thead th,
table thead th,
.dataTable thead th {
  background:var(--paper-50) !important;
  color:var(--ink-500) !important;
  font-family:var(--font-text) !important;
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase;
  padding:14px 16px !important;
  border:0 !important;
  border-bottom:1px solid var(--ink-100) !important;
}
.table tbody td,
table tbody td {
  padding:16px !important;
  border:0 !important;
  border-bottom:1px solid var(--ink-100) !important;
  vertical-align:middle !important;
  color:var(--ink-700) !important;
}
.table tbody tr:hover td { background:var(--paper-50) !important; }
.table tbody tr:last-child td { border-bottom:0 !important; }

/* status pills inside dashboards */
.badge,
.status,
.label,
.pill {
  display:inline-flex !important;
  align-items:center !important;
  gap:4px;
  height:24px !important;
  padding:0 10px !important;
  border-radius:var(--r-pill) !important;
  font-family:var(--font-text) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:-0.005em !important;
  line-height:1 !important;
  background:var(--paper-50) !important;
  color:var(--ink-700) !important;
  border:1px solid var(--ink-100) !important;
}
.badge--success,.badge.bg-success,.badge-success,.status-success,.status.success,
.label-success,.text-bg-success,.bg-success {
  background:color-mix(in srgb,var(--ok-600) 12%,transparent) !important;
  color:var(--ok-600) !important;
  border-color:transparent !important;
}
.badge--warning,.badge.bg-warning,.badge-warning,.status-warning,.status.warning,
.label-warning,.text-bg-warning,.bg-warning {
  background:color-mix(in srgb,var(--warn-600) 12%,transparent) !important;
  color:var(--warn-600) !important;
  border-color:transparent !important;
}
.badge--danger,.badge.bg-danger,.badge-danger,.status-danger,.status.danger,
.label-danger,.text-bg-danger,.bg-danger {
  background:color-mix(in srgb,var(--danger-600) 12%,transparent) !important;
  color:var(--danger-600) !important;
  border-color:transparent !important;
}
.badge--primary,.badge.bg-primary,.badge-primary,.text-bg-primary,.bg-primary {
  background:var(--accent-50) !important;
  color:var(--accent-700) !important;
  border-color:transparent !important;
}

/* DataTables filters/pagination */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height:40px;
  border:1.5px solid var(--ink-300) !important;
  border-radius:var(--r-3) !important;
  padding:0 12px !important;
  font-size:14px;
}
.dataTables_paginate .paginate_button {
  border-radius:var(--r-2) !important;
  border:1px solid var(--ink-100) !important;
  background:var(--paper-0) !important;
  color:var(--ink-700) !important;
  font-weight:500;
  margin:0 2px;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background:var(--ink-1000) !important;
  color:#fff !important;
  border-color:var(--ink-1000) !important;
}

/* admin/user buttons (kept rectangular, not pill, in dashboards) */
.dashboard-wrapper .btn,
.dashboard-wrapper .i-btn,
.main-wrapper .btn,
.main-wrapper .i-btn,
.admin-wrapper .btn,
.admin-wrapper .i-btn,
.modal .btn { border-radius:var(--r-2) !important; height:40px; padding:0 16px; }
.dashboard-wrapper .btn--lg,
.admin-wrapper .btn--lg { height:48px; padding:0 24px; }

/* modal */
.modal-content {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.25) !important;
}
.modal-header {
  border-bottom:1px solid var(--ink-100) !important;
  padding:var(--s-5) var(--s-6) !important;
}
.modal-title {
  font-family:var(--font-display);
  font-weight:600 !important;
  color:var(--ink-1000) !important;
  letter-spacing:-0.01em;
}
.modal-body { padding:var(--s-6) !important; }
.modal-footer {
  border-top:1px solid var(--ink-100) !important;
  padding:var(--s-5) var(--s-6) !important;
}

/* page heading inside dashboards */
.page-title,
.dashboard-title,
.admin-page-title {
  font-family:var(--font-display) !important;
  font-size:28px !important;
  font-weight:700 !important;
  color:var(--ink-1000) !important;
  letter-spacing:-0.02em;
  margin-bottom:var(--s-5) !important;
}

/* dashboard breadcrumb */
.dashboard-breadcrumb,
.admin-breadcrumb {
  font-family:var(--font-text);
  font-size:13px;
  color:var(--ink-500) !important;
}

/* misc legacy color killers in dashboards */
.dashboard-wrapper .bg-light,
.admin-wrapper .bg-light,
.main-wrapper .bg-light {
  background:var(--paper-50) !important;
}
.dashboard-wrapper .bg-dark,
.admin-wrapper .bg-dark,
.main-wrapper .bg-dark {
  background:var(--ink-1000) !important;
}

/* nice-select */
.nice-select {
  height:44px !important;
  line-height:42px !important;
  border:1.5px solid var(--ink-300) !important;
  border-radius:var(--r-3) !important;
  font-family:var(--font-text);
  font-size:14px;
}
.nice-select.open { border-color:var(--ink-1000) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-600) 30%,transparent); }
.nice-select .list {
  border-radius:var(--r-3) !important;
  border:1px solid var(--ink-100) !important;
  box-shadow:0 12px 32px -16px rgba(15,23,42,.2) !important;
  margin-top:8px;
}
.nice-select .option.selected,
.nice-select .option:hover { background:var(--paper-50) !important; }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height:52px !important;
  border:1.5px solid var(--ink-300) !important;
  border-radius:var(--r-3) !important;
  display:flex !important;
  align-items:center;
  padding:0 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:48px !important; padding:0 !important; color:var(--ink-1000); }
.select2-dropdown {
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-3) !important;
  box-shadow:0 12px 32px -16px rgba(15,23,42,.2) !important;
}

/* simplebar in sidebars */
.simplebar-track .simplebar-scrollbar:before { background:rgba(255,255,255,.2) !important; }


/* --------------------------------------------------------------------------
   17. Auth pages (login / register / forgot password)
   -------------------------------------------------------------------------- */
.auth,
.auth-wrapper,
.auth-page {
  background:var(--paper-0) !important;
  font-family:var(--font-text) !important;
}
.auth-left,
.auth-banner {
  background:var(--ink-1000) !important;
  color:#fff !important;
  position:relative;
  overflow:hidden;
}
.auth-left::before { display:none !important; }
.auth-left h1,
.auth-left h2,
.auth-banner h1,
.auth-banner h2 { color:#fff !important; }
.auth-left p,
.auth-banner p { color:rgba(255,255,255,.78) !important; }

.auth-right,
.auth-form-wrapper {
  background:var(--paper-0) !important;
  padding:var(--s-9) var(--s-7) !important;
}
.auth-form-wrapper h1,
.auth-form-wrapper h2,
.auth-form-wrapper h3 { font-size:var(--t-h2); margin-bottom:var(--s-3); }


/* --------------------------------------------------------------------------
   17b. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-bar,
.cookie-banner,
.cookie-popup {
  background:var(--ink-1000) !important;
  color:rgba(255,255,255,.78) !important;
  border:0 !important;
  border-radius:var(--r-4) !important;
  padding:var(--s-5) var(--s-6) !important;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.4) !important;
  font-family:var(--font-text);
  font-size:14px;
}
.cookie-bar a,.cookie-banner a,.cookie-popup a { color:#fff !important; text-decoration:underline !important; }
.cookie-bar .btn,.cookie-banner .btn,.cookie-popup .btn { height:40px; padding:0 18px; }


/* --------------------------------------------------------------------------
   17c. Plans page (pricing) — legacy override + modern cards
   -------------------------------------------------------------------------- */
.pricing-card-area,
.pricing-plan-area,
.plan-list,
.plans-section { padding-block:var(--s-9); }
@media (min-width:1024px){
  .pricing-card-area,.pricing-plan-area,.plan-list,.plans-section { padding-block:var(--s-10); }
}

.plan-card,.price-card,.pricing-card,.plan-item {
  display:flex !important;
  flex-direction:column !important;
  gap:var(--s-4) !important;
  padding:var(--s-7) !important;
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  height:100%;
}
.plan-card .plan-name,.plan-card h3,.plan-item h3,
.pricing-card h3,.price-card h3 {
  font-family:var(--font-display) !important;
  font-size:var(--t-h3) !important;
  color:var(--ink-1000) !important;
  margin:0 !important;
}
.plan-card .price,.plan-card .plan-amount,.plan-card .price-amount {
  display:flex;
  align-items:baseline;
  gap:6px;
}
.plan-card .price .currency,.plan-card .price sup { font-size:24px; color:var(--ink-700); }
.plan-card .price .period,.plan-card .price sub,.plan-card .price small {
  font-size:14px; color:var(--ink-500); font-weight:500;
}
.plan-card .plan-features,.plan-card ul,.plan-card .features {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.plan-card .plan-features li,
.plan-card ul li,
.plan-card .features li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--ink-700);
  padding:0;
  border:0;
  background:transparent;
}
.plan-card .plan-features li::before,
.plan-card ul li::before {
  content:"";
  width:18px; height:18px;
  flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23116DFF' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;
  background-size:contain;
  margin-top:2px;
}
.plan-card.featured,.plan-card.popular,.plan-card.is-featured,
.plan-card.recommended,.plan-card.highlighted {
  background:var(--ink-1000) !important;
  color:#fff !important;
}
.plan-card.featured *,.plan-card.popular *,.plan-card.is-featured *,
.plan-card.recommended *,.plan-card.highlighted * { color:inherit !important; }
.plan-card.featured h3,.plan-card.popular h3,.plan-card.is-featured h3 { color:#fff !important; }
.plan-card.featured .plan-features li::before,
.plan-card.popular .plan-features li::before,
.plan-card.is-featured .plan-features li::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}


/* --------------------------------------------------------------------------
   17d. Blog index + detail pages
   -------------------------------------------------------------------------- */
.blog-card,
.blog-list .blog-item,
.blog-grid .blog-item {
  background:var(--paper-0) !important;
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-4) !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out);
}
.blog-card:hover { transform:translateY(-2px); box-shadow:0 8px 30px -10px rgba(15,23,42,.18); }
.blog-card img,
.blog-list .blog-item img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.blog-card .content,
.blog-card .blog-content { padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.blog-card .blog-meta,
.blog-card .meta { font-size:13px; color:var(--ink-500); }
.blog-card h3,
.blog-card .title {
  font-family:var(--font-display);
  font-size:var(--t-h4) !important;
  font-weight:600 !important;
  color:var(--ink-1000) !important;
  letter-spacing:-0.01em;
  line-height:1.3;
  margin:0;
}

.blog-details img,
.blog-details .featured-image,
.text-editor-content img {
  border-radius:var(--r-4);
  display:block;
  margin-block:var(--s-5);
}


/* --------------------------------------------------------------------------
   17e. Page (legal/long-form) reading container
   -------------------------------------------------------------------------- */
.page-section,
.page-content,
.text-editor-content {
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--ink-700);
}
.page-section h1,.page-content h1,.text-editor-content h1 { font-size:var(--t-h1); margin:var(--s-7) 0 var(--s-4); }
.page-section h2,.page-content h2,.text-editor-content h2 { font-size:var(--t-h2); margin:var(--s-6) 0 var(--s-3); }
.page-section h3,.page-content h3,.text-editor-content h3 { font-size:var(--t-h3); margin:var(--s-5) 0 var(--s-3); }
.page-section p,.page-content p { max-width:65ch; }


/* --------------------------------------------------------------------------
   17f. Pagination (Laravel default)
   -------------------------------------------------------------------------- */
.pagination {
  display:flex;
  gap:6px;
  list-style:none;
  padding:0;
  justify-content:center;
  margin-top:var(--s-7);
}
.pagination .page-item .page-link,
.pagination .page-link {
  border:1px solid var(--ink-100) !important;
  border-radius:var(--r-2) !important;
  color:var(--ink-700) !important;
  background:var(--paper-0) !important;
  padding:0 12px !important;
  height:40px;
  display:inline-flex;
  align-items:center;
  font-size:14px;
  font-weight:500;
  font-family:var(--font-text);
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active {
  background:var(--ink-1000) !important;
  color:#fff !important;
  border-color:var(--ink-1000) !important;
}
.pagination .page-item.disabled .page-link {
  color:var(--ink-300) !important;
  background:var(--paper-50) !important;
}


/* --------------------------------------------------------------------------
   18. Reduced motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-aos] { transform:none !important; opacity:1 !important; }
}