:root {
  color-scheme: dark;
  --ink: #edf4f0;
  --muted: #9fb2aa;
  --line: #294039;
  --paper: #07110f;
  --white: #10201c;
  --green: #36bd8d;
  --green-2: #4bd2a0;
  --mint: #18382f;
  --navy: #0b1916;
  --danger: #ef8178;
  --shadow: 0 22px 56px rgba(0, 0, 0, 0.34);
  --premium-bg: #07110f;
  --premium-band: #0a1714;
  --premium-surface: #10201c;
  --premium-surface-2: #142923;
  --premium-line: #294039;
  --premium-gold: #d2ad62;
  --premium-coral: #e78374;
  --premium-blue: #71aeb8;
}

html {
  background: var(--premium-bg);
}

body {
  background: var(--premium-bg);
  color: var(--ink);
}

body,
.page,
main {
  accent-color: var(--green-2);
}

::selection {
  color: #06110e;
  background: #6ce0b6;
}

a {
  color: var(--green-2);
}

.site-header {
  border-color: rgba(100, 143, 128, 0.28);
  background: rgba(7, 17, 15, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.menzapp-wordmark {
  width: 162px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  background: #f4f7f4;
}

.brand,
.top-nav a,
.text-link {
  color: #dfe9e4;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: #67ddb3;
}

.button {
  border-radius: 7px;
}

.button-primary {
  color: #f8fffb;
  background: #147859;
  box-shadow: 0 10px 26px rgba(20, 120, 89, 0.3);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #19956d;
}

.button-secondary,
.button-ghost {
  border-color: #38564c;
  color: #e8f1ed;
  background: #10201c;
}

.button-secondary:hover,
.button-ghost:hover {
  border-color: #56b997;
  background: #162d26;
}

.button-light {
  color: #0c4d3b;
  background: #f0f5f1;
}

.eyebrow,
.feature-runner-heading div > span {
  color: #60d4aa;
}

.hero {
  isolation: isolate;
  position: relative;
  padding-block: clamp(46px, 6vw, 84px);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero::before {
  z-index: -2;
  border-block: 1px solid rgba(105, 160, 140, 0.16);
  background-color: #020504;
  background-image:
    linear-gradient(90deg, rgba(1, 4, 3, 0.99) 0%, rgba(2, 7, 5, 0.94) 45%, rgba(2, 8, 6, 0.8) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 27%, rgba(0, 0, 0, 0.36) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -28px 70px rgba(0, 0, 0, 0.34);
}

.hero::after {
  z-index: -1;
  background-image: url("/images/features/tablet_02_rendelesek.png");
  background-repeat: no-repeat;
  background-position: 82% 48%;
  background-size: auto 154%;
  opacity: 0.22;
  filter: saturate(0.78) contrast(1.18);
  mask-image: linear-gradient(90deg, transparent 18%, #000 52%, #000 88%, transparent 100%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy h1,
.hero-copy h2,
.section-heading h2,
.page-heading h1,
.feature-copy h2 {
  color: #f2f7f4;
}

.lead,
.page-heading p,
.section-heading p,
.app-intro-copy,
.feature-copy p {
  color: var(--muted);
}

.trust-row {
  border-color: var(--premium-line);
  color: var(--muted);
}

.trust-row b {
  color: #f2f7f4;
}

.public-user-summary {
  border-color: var(--premium-line);
  background: #0f211c;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

.public-user-summary span {
  color: #98aca4;
}

.public-user-summary strong {
  color: #64d8ae;
}

.hero-visual .orb {
  display: none;
}

.app-showcase {
  background: transparent;
}

.showcase-kicker {
  border-color: #345249;
  background: rgba(10, 25, 21, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.showcase-kicker span {
  color: #61d7ac;
}

.showcase-kicker strong {
  color: #edf4f0;
}

.showcase-slide {
  border-color: #dfe9e4;
  background: #dfe8e3;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.44);
}

.app-showcase:not(.is-ready) .showcase-slide:first-child,
.showcase-slide[data-position="center"] {
  box-shadow:
    0 36px 86px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(93, 210, 169, 0.22);
}

.showcase-arrow,
.showcase-dots {
  border-color: #35544a;
  color: #e8f1ed;
  background: rgba(12, 29, 24, 0.92);
}

.showcase-arrow:hover {
  background: #198662;
}

.showcase-dot {
  background: #587069;
}

.showcase-dot[aria-current="true"] {
  background: #56d2a5;
}

.showcase-hint {
  color: #91a79f;
}

.payment-methods span {
  color: #9fb2aa;
}

.payment-logo-row {
  padding: 10px 12px;
  border: 1px solid #d7e1dc;
  border-radius: 6px;
  background: #f4f7f4;
}

.feature-runner {
  border-color: var(--premium-line);
  background: #0a1714;
}

.feature-runner-heading h2,
.feature-runner-heading > a,
.feature-runner-card {
  color: #edf4f0;
}

.feature-runner-heading > a {
  border-color: #36564b;
  background: #11231e;
}

.feature-runner-heading > a:hover,
.feature-runner-heading > a:focus-visible {
  border-color: #55c69e;
  background: #173128;
}

.feature-runner-card {
  border-color: #29483e;
  border-top-color: #41c696;
  background: #10211c;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.feature-runner-card--gold {
  border-top-color: var(--premium-gold);
}

.feature-runner-card--coral {
  border-top-color: var(--premium-coral);
}

.feature-runner-card--navy {
  border-top-color: var(--premium-blue);
}

.feature-runner-card:hover,
.feature-runner-card:focus-visible {
  border-color: #4a826e;
  background: #142923;
}

.feature-runner-card img {
  background: #e6eee9;
}

.feature-runner-card--logo img {
  background: #f5f7f4;
}

.feature-runner-copy > span {
  color: #a7bab2;
}

.package-section {
  border-block: 1px solid var(--premium-line);
  background: #0b1815;
  scroll-margin-top: 92px;
}

.comparison-package-card,
.public-package-card {
  border-color: #2b443b;
  background: #10201c;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.comparison-package-card:nth-child(2) {
  border-color: #7d6940;
}

.comparison-package-head,
.public-package-head {
  background: #126348;
}

.comparison-package-card:nth-child(2) .comparison-package-head {
  background: #5f502f;
}

.comparison-package-prices,
.comparison-feature-row,
.public-price-tiers {
  border-color: #263d35;
}

.comparison-package-prices span,
.public-price-tiers span {
  color: #9eb0a9;
}

.comparison-package-prices strong {
  color: #eef5f1;
}

.comparison-feature-heading {
  color: #72deb8;
  background: #173128;
}

.comparison-feature-row--enabled {
  color: #dce8e2;
}

.comparison-feature-row--disabled {
  color: #71837c;
}

.comparison-feature-marker {
  color: #55d2a4;
}

.app-intro,
.features-intro,
.feature-section {
  border-color: var(--premium-line);
}

.feature-section {
  background: #07110f;
  scroll-margin-top: 92px;
}

.feature-section:nth-of-type(even) {
  background: #0a1714;
}

.feature-jump {
  border-color: var(--premium-line);
}

.feature-jump a {
  border-color: #304b42;
  color: #cddbd5;
  background: #10211c;
}

.feature-jump a:hover,
.feature-jump a:focus-visible {
  border-color: #58c89f;
  color: #71deb8;
  background: #173128;
}

.tag,
.tag.green {
  color: #79e1bd;
  background: #17352c;
}

.tag.gold {
  color: #e4c77f;
  background: #3b321f;
}

.tag.coral {
  color: #f0a296;
  background: #3a2421;
}

.function-list li,
.screen-set h3 {
  color: #cedbd5;
}

.function-list li::before {
  background: #4cd09e;
}

.function-list .function-sublist li::before {
  background: var(--premium-gold);
}

.screen-frame img {
  box-shadow:
    0 30px 58px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(231, 239, 235, 0.2);
}

.gallery-arrow {
  border-color: #345047;
  color: #e7f0ec;
  background: #10211c;
}

.gallery-arrow:hover:not(:disabled),
.gallery-arrow:focus-visible {
  border-color: #4ecb9c;
  background: #147859;
}

.gallery-arrow:disabled {
  color: #61736c;
  background: #0b1714;
}

.screen-gallery,
.feature-jump {
  scrollbar-color: #44685c transparent;
}

.screen-gallery::-webkit-scrollbar-thumb {
  background: #44685c;
}

.brand-showcase {
  border: 1px solid #d5dfda;
  border-radius: 6px;
  background: #f3f6f3;
}

.cta-band,
.plan-hero,
.contact-card-primary,
.auth-aside {
  color: #f2f7f4;
  background: #0d3028;
}

.cta-band p,
.auth-aside p,
.contact-methods small,
.plan-price span {
  color: #b5c9c1;
}

.site-footer {
  border-color: var(--premium-line);
  color: #90a49c;
  background: #06100d;
}

.site-footer div,
.footer-copy {
  color: #cbd9d3 !important;
}

.panel,
.metric-card,
.auth-card,
.contact-card,
.stat-card,
.selection-mode-option,
.feature-media-item,
.public-feature {
  border-color: var(--premium-line);
  color: var(--ink);
  background: var(--premium-surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.metric-accent,
.contact-card-primary {
  background: #0d3028;
}

.account-list article,
.credential-panel > div,
.price-tier-row,
.feature-list > div,
.feature-detail-list > details,
blockquote {
  background: #0b1916;
}

input,
select,
textarea,
.feature-editor,
.recipient-check {
  border-color: #355149;
  color: #e7f0ec;
  background: #0a1714;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #4fd0a0;
  box-shadow: 0 0 0 3px rgba(79, 208, 160, 0.16);
}

input:disabled {
  color: #73857d;
  background: #101b18;
}

.form-grid label,
.form-stack label,
.inline-form label,
.inline-request label,
.feature-editor > label:not(.check),
.price-tier-row label {
  color: #cbd8d2;
}

table,
th,
td,
.activity-list article,
.sub-form,
.request-actions {
  border-color: var(--premium-line);
}

th,
td small,
.muted,
.metric-card span,
.metric-card small,
.stat-card span,
.stat-card small,
.company-data dt,
.company-data dd,
.public-feature summary small,
.public-feature > p,
.feature-detail-list details > p {
  color: var(--muted);
}

.status,
.status-muted {
  color: #b7c7c1;
  background: #1c2b27;
}

.status-active,
.status-approved,
.status-sent,
.status-paid {
  color: #7ee5c0;
  background: #17352c;
}

.notice,
.status-pending,
.status-trial {
  color: #e1c27a;
  background: #352e1e;
}

.status-rejected,
.status-cancelled,
.status-suspended {
  color: #f2a098;
  background: #382220;
}

.contact-methods > a {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.contact-icon {
  color: #0d5b45;
  background: #edf4f0;
}

@media (max-width: 620px) {
  .menzapp-wordmark {
    width: 138px;
  }

  .site-header {
    background: rgba(7, 17, 15, 0.97);
  }

  .hero {
    padding-block: 38px 48px;
  }

  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(1, 4, 3, 0.96) 0%, rgba(2, 7, 5, 0.88) 56%, rgba(1, 4, 3, 0.96) 100%),
      linear-gradient(115deg, rgba(255, 255, 255, 0.045), transparent 42%);
  }

  .hero::after {
    background-position: 70% 56%;
    background-size: auto 112%;
    opacity: 0.08;
    mask-image: linear-gradient(180deg, transparent 3%, #000 24%, #000 82%, transparent 100%);
  }

  .package-section,
  .feature-section {
    scroll-margin-top: 138px;
  }

  .payment-logo-row {
    padding: 7px 8px;
  }
}