:root {
  color-scheme: dark;
  --theme-bg: #070b18;
  --theme-bg-soft: #0d1324;
  --theme-panel: #111a30;
  --theme-panel-raised: #182444;
  --theme-text: #f4f6ff;
  --theme-muted: #aab5cc;
  --theme-accent: #8b5cf6;
  --theme-accent-strong: #22d3ee;
  --theme-accent-soft: rgba(139, 92, 246, .13);
  --theme-highlight: #67e8f9;
  --theme-border: rgba(148, 163, 220, .2);
  --theme-shadow: 0 18px 52px rgba(0, 0, 0, .26);
  --theme-gradient: linear-gradient(120deg, #8b5cf6 0%, #6366f1 52%, #22d3ee 100%);
}

html {
  background: var(--theme-bg) !important;
  scroll-behavior: smooth;
  scrollbar-color: #6554bd var(--theme-bg);
}

body {
  color: var(--theme-text) !important;
  background:
    radial-gradient(ellipse at 8% -12%, rgba(139, 92, 246, .16), transparent 34%),
    radial-gradient(ellipse at 94% 4%, rgba(34, 211, 238, .08), transparent 30%),
    var(--theme-bg) !important;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

::selection {
  color: #0b1024;
  background: rgba(103, 232, 249, .82);
}

:focus-visible {
  outline: 3px solid var(--theme-highlight) !important;
  outline-offset: 3px;
}

a {
  text-decoration-color: rgba(139, 92, 246, .5);
  text-underline-offset: .18em;
}

a:hover {
  color: #67e8f9 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text) !important;
  text-wrap: balance;
}

p, li, small, label, summary {
  text-wrap: pretty;
}

header,
.header,
.smrt-header {
  background: rgba(7, 11, 24, .95) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(16px);
}

.brand-logo,
.smrt-logo,
.smrt-logo img {
  border-color: var(--theme-border) !important;
}

.smrt-nav a,
.nav-links a,
nav a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.smrt-nav a:hover,
.nav-links a:hover {
  color: var(--theme-accent) !important;
}

.smrt-menu,
.menu {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

.smrt-nav-wa,
.btn,
.button,
.cta,
.cta-btn,
.pricing-btn,
.plan-btn,
.btn-primary,
.btn-gold,
.blog-card-actions a,
button.filter.active {
  color: #080d1c !important;
  background: var(--theme-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, .28) !important;
}

.smrt-nav-wa:hover,
.btn:hover,
.button:hover,
.cta:hover,
.cta-btn:hover,
.pricing-btn:hover,
.plan-btn:hover,
.btn-primary:hover,
.btn-gold:hover,
.blog-card-actions a:hover,
button.filter.active:hover {
  color: #080d1c !important;
  background: linear-gradient(120deg, #a78bfa, #67e8f9) !important;
  box-shadow: 0 12px 30px rgba(34, 211, 238, .28) !important;
}

.btn-ghost,
.btn.ghost,
.filter,
.blog-filters button {
  color: var(--theme-text) !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.btn.ghost:hover,
.filter:hover,
.blog-filters button:hover,
.blog-filters button.active {
  color: #a78bfa !important;
  background: var(--theme-accent-soft) !important;
  border-color: rgba(34, 211, 238, .5) !important;
}

.hero,
.blog-hero,
.blog-hero-clean,
.article-hero,
.article {
  color: var(--theme-text);
}

.hero h1 span,
.hero h1 .grad,
.section-head h2 .grad,
.blog-hero h1 .grad {
  color: var(--theme-accent) !important;
  background: linear-gradient(120deg, #f4f6ff 5%, #a78bfa 53%, #67e8f9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.eyebrow,
.blog-kicker,
.section-label,
.blog-category {
  color: #a78bfa !important;
  background: rgba(139, 92, 246, .1) !important;
  border-color: rgba(139, 92, 246, .3) !important;
}

.ticker,
.section.dark,
.pricing,
.blog-library,
.blog-feature-section {
  background-color: rgba(13, 19, 36, .88) !important;
  border-color: var(--theme-border) !important;
}

.hero-card,
.screen,
.stats div,
.cards article,
.devices div,
.steps div,
.accordion details,
.plan,
.signal,
.card,
.blog-featured,
.featured-grid article,
.blog-card,
.blog-card-clean,
.article-cta,
.faq-item,
.tv-card,
.stat-card,
.cat-card,
.device-card,
.step-card,
.feat-card,
.testi-card {
  color: var(--theme-text) !important;
  background: linear-gradient(150deg, rgba(24, 36, 68, .94), rgba(14, 20, 39, .98)) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow) !important;
}

.cards article:hover,
.blog-card:hover,
.devices div:hover {
  border-color: rgba(34, 211, 238, .48) !important;
  background: linear-gradient(150deg, #232d54, #111a30) !important;
}

.cards b,
.screen-body b,
.stats b,
.steps b,
.price,
.plan-price,
.stat-card b {
  color: var(--theme-accent) !important;
}

.plan.popular,
.plan.featured {
  border-color: rgba(103, 232, 249, .7) !important;
}

.plan label,
.plan .badge,
.blog-year {
  color: #090d20 !important;
  background: linear-gradient(120deg, #a78bfa, #67e8f9) !important;
}

.signal {
  background: rgba(139, 92, 246, .1) !important;
}

.signal span {
  color: var(--theme-accent) !important;
}

.muted,
.lead,
.players,
.blog-card p,
.article p,
.article .intro,
.blog-hero p,
.blog-hero-clean p {
  color: var(--theme-muted) !important;
}

.article .back,
.blog-card h2 a,
.blog-card h3 a,
.article a:not(.btn) {
  color: #67e8f9 !important;
}

.article a:not(.btn):hover,
.blog-card h2 a:hover,
.blog-card h3 a:hover {
  color: #a78bfa !important;
}

.blog-toolbar a,
.blog-filters button,
.filter {
  border-color: var(--theme-border) !important;
}

.blog-card:before {
  background: linear-gradient(135deg, rgba(139, 92, 246, .11), transparent 55%, rgba(34, 211, 238, .07)) !important;
}

input,
select,
textarea,
.blog-search input {
  color: var(--theme-text) !important;
  background: #0d1324 !important;
  border-color: var(--theme-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: #8c98b5 !important;
}

table,
th,
td,
blockquote,
pre,
code {
  border-color: var(--theme-border) !important;
}

blockquote,
pre,
code {
  background: rgba(139, 92, 246, .07) !important;
}

footer,
.footer,
.copyright {
  color: var(--theme-muted) !important;
  background: #050812 !important;
  border-color: var(--theme-border) !important;
}

footer a,
.footer a {
  color: #b5bfd8;
}

footer a:hover,
.footer a:hover {
  color: var(--theme-accent) !important;
}

.smrt-whatsapp,
.whatsapp-float {
  color: #080d1c !important;
  background: linear-gradient(120deg, #8b5cf6, #22d3ee) !important;
  border-color: rgba(244, 246, 255, .78) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32) !important;
}

.smrt-whatsapp::after {
  border-color: rgba(139, 92, 246, .52) !important;
}

hr {
  border-color: var(--theme-border) !important;
}

.smrt-header {
  position: sticky !important;
  top: 0;
  z-index: 9000;
  border-bottom: 1px solid rgba(139, 92, 246, .24) !important;
  background: rgba(7, 11, 24, .9) !important;
  box-shadow: 0 12px 34px rgba(3, 5, 18, .38) !important;
}

.smrt-header-inner {
  width: min(100% - 40px, 1280px) !important;
  min-height: 78px !important;
  margin-inline: auto !important;
  padding: 10px 0 !important;
  gap: 28px !important;
}

.smrt-logo {
  flex: 0 0 auto;
  border-radius: 14px;
}

.smrt-logo img {
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, .24)) !important;
}

.smrt-nav {
  gap: 5px !important;
}

.smrt-nav a {
  color: #cbd2e8 !important;
  padding: 10px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.smrt-nav a:hover,
.smrt-nav a[aria-current="page"],
.smrt-nav a[aria-current="location"] {
  color: #f4f6ff !important;
  background: rgba(139, 92, 246, .12) !important;
  border-color: rgba(139, 92, 246, .22) !important;
  box-shadow: none !important;
  transform: none !important;
}

.smrt-nav .smrt-nav-wa {
  margin-left: 5px;
  padding: 11px 17px !important;
  color: #0b1024 !important;
  background: var(--theme-gradient) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, .25) !important;
}

.smrt-nav .smrt-nav-wa:hover {
  color: #080d1c !important;
  background: linear-gradient(120deg, #a78bfa, #67e8f9) !important;
  box-shadow: 0 10px 28px rgba(34, 211, 238, .26) !important;
}

.smrt-menu {
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 !important;
  color: var(--theme-text) !important;
  background: rgba(139, 92, 246, .1) !important;
  border: 1px solid rgba(139, 92, 246, .34) !important;
  border-radius: 13px !important;
}

.smrt-menu:hover {
  background: rgba(139, 92, 246, .18) !important;
  border-color: rgba(34, 211, 238, .52) !important;
}

.smrt-menu-icon {
  display: grid;
  gap: 5px;
}

.smrt-menu-icon span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.smrt-menu[aria-expanded="true"] .smrt-menu-icon span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.smrt-menu[aria-expanded="true"] .smrt-menu-icon span:nth-child(2) {
  opacity: 0;
}

.smrt-menu[aria-expanded="true"] .smrt-menu-icon span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1080px) {
  .smrt-header-inner {
    width: min(100% - 32px, 900px) !important;
    min-height: 72px !important;
    gap: 16px !important;
  }

  .smrt-menu {
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  .smrt-nav {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: max(16px, calc((100vw - 900px) / 2)) !important;
    left: auto !important;
    display: none !important;
    width: min(370px, calc(100vw - 32px)) !important;
    max-height: min(75vh, 620px);
    overflow-y: auto;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 12px !important;
    background: rgba(11, 15, 33, .98) !important;
    border: 1px solid rgba(139, 92, 246, .3) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .52) !important;
    backdrop-filter: blur(22px);
  }

  .smrt-nav.smrt-open {
    display: flex !important;
    animation: menu-v2-in .18s ease-out both;
  }

  .smrt-nav a {
    width: 100% !important;
    padding: 13px 14px !important;
    text-align: left !important;
    font-size: 15px !important;
    border-radius: 11px !important;
  }

  .smrt-nav .smrt-nav-wa {
    margin: 7px 0 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .smrt-header-inner {
    width: calc(100% - 28px) !important;
    min-height: 66px !important;
  }

  .smrt-logo img {
    width: min(155px, 48vw) !important;
    height: auto !important;
    max-height: 46px !important;
  }

  .smrt-menu {
    width: 43px;
    height: 43px;
  }
}

@keyframes menu-v2-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.blog-hero-clean {
  position: relative;
  isolation: isolate;
  padding: 100px 0 42px !important;
  text-align: left !important;
  background:
    radial-gradient(ellipse at 14% 20%, rgba(139, 92, 246, .2), transparent 44%),
    linear-gradient(180deg, rgba(17, 26, 48, .45), transparent) !important;
}

.blog-hero-clean .wrap {
  position: relative;
}

.blog-hero-clean .blog-kicker {
  padding: 8px 12px;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 999px;
}

.blog-hero-clean h1 {
  max-width: 820px !important;
  margin: 24px 0 18px !important;
  font-size: clamp(2.7rem, 6vw, 5.25rem) !important;
  letter-spacing: -.055em;
}

.blog-hero-clean p {
  max-width: 650px !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
}

.blog-hero-actions {
  justify-content: flex-start !important;
  margin-top: 26px !important;
}

.blog-hero-visual {
  position: relative;
  max-width: 1240px;
  height: clamp(190px, 29vw, 340px);
  margin: 10px auto 4px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 26px;
  background: #111a30;
  box-shadow: 0 26px 76px rgba(0, 0, 0, .38);
}

.blog-hero-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 24, .15), rgba(7, 11, 24, .04) 50%, rgba(7, 11, 24, .62)),
    linear-gradient(0deg, rgba(7, 11, 24, .24), transparent 45%);
  content: "";
  pointer-events: none;
}

.blog-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: saturate(.82);
}

.blog-hero-visual-label {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 5vw, 58px);
  bottom: clamp(16px, 4vw, 42px);
  max-width: 290px;
  padding: 16px 18px;
  color: var(--theme-text);
  background: rgba(7, 11, 24, .76);
  border: 1px solid rgba(139, 92, 246, .38);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

.blog-hero-visual-label span {
  display: block;
  margin-bottom: 5px;
  color: #67e8f9;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-hero-visual-label strong {
  font-size: 1rem;
  line-height: 1.4;
}

.blog-feature-section {
  padding-top: 42px !important;
}

.featured-grid,
.blog-grid-clean {
  gap: 22px !important;
}

.blog-card,
.blog-featured,
.blog-grid-clean .blog-card {
  min-height: 0 !important;
  padding: 22px !important;
  border-radius: 21px !important;
}

.blog-card-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin: -22px -22px 21px;
  overflow: hidden;
  background: #111a30;
  border-bottom: 1px solid var(--theme-border);
}

.blog-card-image::after {
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(0deg, rgba(7, 11, 24, .48), transparent);
  content: "";
  pointer-events: none;
}

.blog-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, filter .3s ease;
}

.blog-card:hover .blog-card-image img,
.blog-card-image:focus-visible img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

.blog-card .card-top {
  margin-bottom: 2px;
}

.blog-card h3 {
  font-size: 1.18rem !important;
  letter-spacing: -.02em;
}

.blog-card p {
  font-size: .93rem !important;
}

.blog-library {
  padding-top: 58px !important;
}

.blog-search input {
  min-height: 48px;
}

.filter {
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.filter:hover {
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .blog-hero-clean {
    padding-top: 72px !important;
  }

  .blog-hero-clean h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem) !important;
  }

  .blog-hero-visual {
    height: 210px;
    border-radius: 19px;
  }

  .blog-hero-visual-label {
    right: 12px;
    bottom: 12px;
    max-width: 235px;
    padding: 12px 14px;
  }

  .blog-card,
  .blog-featured,
  .blog-grid-clean .blog-card {
    padding: 18px !important;
  }

  .blog-card-image {
    margin: -18px -18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}