/*
 * M TEK — Responsive Experience Layer
 * Mobile + desktop harmony, overflow safety, compact spacing and
 * premium section transitions. Loaded last so it intentionally overrides
 * older responsive rules without changing page content or backend logic.
 */

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  scroll-padding-top: 88px;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Keep every layout child shrinkable so long words cannot push the page wider. */
.hero,
.container,
.navbar,
.section-title,
.about-grid,
.feature-grid,
.service-grid,
.steps-grid,
.why-grid,
.mission-grid,
.contact-grid,
.ai-intro-grid,
.ai-flow-grid,
.ai-future-grid,
.ai-faq,
.investment-story-content,
.investment-story-timeline,
.market-grid,
.market-toolbar,
.mtek-app-downloads-inner,
.mtek-app-store-grid {
  min-width: 0;
}

p,
h1,
h2,
h3,
h4,
span,
a,
strong,
small,
li {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

section,
.hero {
  position: relative;
  isolation: isolate;
}

/* Subtle section-edge artwork makes large negative space feel intentional. */
section:not(.live-market)::after,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(420px, 52vw);
  height: min(420px, 52vw);
  right: -14vw;
  bottom: -28vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, .055) 0%, rgba(37, 214, 173, .025) 38%, transparent 70%);
  pointer-events: none;
}

section:nth-of-type(even)::before,
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(280px, 35vw);
  height: 1px;
  left: 8%;
  bottom: 24px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .25), transparent);
  opacity: .55;
  pointer-events: none;
}

.header {
  contain: layout style;
}

/* Desktop/tablet: keep the primary content density stable. */
@media (min-width: 681px) {
  .feature-grid,
  .service-grid,
  .steps-grid,
  .why-grid,
  .contact-grid {
    align-items: stretch;
  }

  .feature-card,
  .service-card,
  .step-card,
  .why-card,
  .contact-card,
  .mission-card {
    min-width: 0;
  }
}

@media (max-width: 680px) {
  :root {
    --mtek-mobile-gutter: 14px;
  }

  .navbar {
    width: calc(100% - (var(--mtek-mobile-gutter) * 2));
    max-width: none;
    padding: 9px 0 !important;
  }

  .header {
    position: sticky !important;
    top: 0;
    width: 100%;
  }

  .logo {
    min-width: 0;
    gap: 9px !important;
  }

  .logo img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
  }

  .logo h2 {
    font-size: 20px !important;
    line-height: 1.1;
  }

  .logo span {
    display: block;
    max-width: min(58vw, 255px);
    font-size: 7px !important;
    line-height: 1.35;
    letter-spacing: .75px !important;
  }

  .mobile-menu {
    flex: 0 0 auto;
    font-size: 24px !important;
    line-height: 1;
    padding: 8px 4px;
  }

  .nav-menu {
    top: 60px !important;
    left: var(--mtek-mobile-gutter) !important;
    right: var(--mtek-mobile-gutter) !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px !important;
    gap: 3px !important;
    border-radius: 16px !important;
    max-height: calc(100svh - 76px);
    overflow: auto;
  }

  .nav-menu li a {
    padding: 10px 11px !important;
    font-size: 13px !important;
  }

  .hero {
    width: calc(100% - (var(--mtek-mobile-gutter) * 2)) !important;
    max-width: none !important;
    padding: 72px 0 44px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    text-align: center;
  }

  .hero-left,
  .hero-right {
    min-width: 0;
    width: 100%;
  }

  .hero-right {
    order: -1;
  }

  .hero-right img {
    display: block;
    width: min(100%, 390px) !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    animation-duration: 7s;
  }

  .hero-badge {
    max-width: 100%;
    font-size: 9px !important;
    line-height: 1.3;
    padding: 7px 11px !important;
    margin-bottom: 13px !important;
  }

  .hero h1 {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin-bottom: 14px !important;
  }

  .hero p {
    max-width: 100%;
    margin: 0 auto 18px !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
  }

  .hero-buttons {
    flex-direction: column !important;
    width: 100%;
    gap: 9px !important;
    margin-bottom: 10px !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    min-width: 0;
    padding: 12px 15px !important;
    font-size: 12px !important;
    line-height: 1.35;
  }

  section {
    padding: 48px 0 !important;
  }

  .container {
    width: calc(100% - (var(--mtek-mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .section-title,
  .section-heading.ai-heading,
  .investment-story-heading {
    width: 100%;
    max-width: 100% !important;
    margin-bottom: 28px !important;
    padding: 0 !important;
    text-align: center;
  }

  .section-title span,
  .section-badge {
    max-width: 100%;
    font-size: 8px !important;
    line-height: 1.35;
    letter-spacing: 1.15px !important;
    padding: 7px 10px !important;
    white-space: normal;
  }

  .section-title h2,
  .investment-story-heading h2,
  .ai-heading h2 {
    max-width: 100%;
    font-size: clamp(25px, 7.5vw, 31px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.03em;
    margin-bottom: 12px !important;
  }

  .section-title p,
  .investment-story-heading p,
  .ai-lead {
    max-width: 100%;
    font-size: 12px !important;
    line-height: 1.72 !important;
  }

  /* Two cards per mobile row for compact site tools/features. */
  .feature-grid,
  .service-grid,
  .steps-grid,
  .why-grid,
  .contact-grid,
  .mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 26px !important;
  }

  .feature-card,
  .service-card,
  .step-card,
  .why-card,
  .contact-card,
  .mission-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 20px 12px !important;
    border-radius: 17px !important;
    overflow: hidden;
  }

  .feature-card i,
  .step-card i {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 14px !important;
    font-size: 21px !important;
  }

  .service-card i,
  .why-card i,
  .contact-card i,
  .mission-card i {
    font-size: 25px !important;
    margin-bottom: 13px !important;
  }

  .feature-card h3,
  .service-card h3,
  .step-card h3,
  .why-card h3,
  .contact-card h3,
  .mission-card h2 {
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .feature-card p,
  .service-card p,
  .step-card p,
  .why-card p,
  .contact-card p,
  .contact-card a,
  .mission-card p {
    max-width: 100%;
    font-size: 10px !important;
    line-height: 1.62 !important;
  }

  .feature-card .feature-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 8px;
    font-size: 9px !important;
    line-height: 1.4;
  }

  .step-number {
    right: 10px !important;
    top: 8px !important;
    font-size: 34px !important;
  }

  .about-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .about-image,
  .about-content {
    width: 100%;
    min-width: 0;
  }

  .about-image img {
    display: block;
    width: min(100%, 410px) !important;
    max-width: 100% !important;
    height: auto;
    margin-inline: auto !important;
    object-fit: contain;
  }

  .about-content h3 {
    max-width: 100%;
    font-size: 24px !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }

  .about-content > p {
    font-size: 12px !important;
    line-height: 1.72 !important;
    margin-bottom: 20px !important;
  }

  .about-list {
    gap: 10px !important;
  }

  .about-item {
    min-width: 0;
    gap: 11px !important;
    padding: 13px !important;
    border-radius: 15px !important;
  }

  .about-item i {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    font-size: 16px !important;
  }

  .about-item h4 {
    font-size: 13px !important;
    line-height: 1.3;
  }

  .about-item p {
    font-size: 10px !important;
    line-height: 1.55;
  }

  /* Live market — exactly two cards per mobile row. */
  .live-market {
    overflow: hidden;
    padding-bottom: 42px !important;
  }

  .market-toolbar {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 7px 12px !important;
    padding: 9px 10px !important;
    margin-bottom: 14px !important;
    border-radius: 13px !important;
  }

  .market-status,
  .market-updated {
    min-width: 0;
    font-size: 9px !important;
    line-height: 1.4;
  }

  .market-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .market-card {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .market-card-top {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .asset-head,
  .market-symbol {
    min-width: 0 !important;
    gap: 7px !important;
  }

  .asset-icon-wrap,
  .market-symbol-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .asset-icon-wrap img,
  .market-symbol-icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
  }

  .asset-name,
  .market-symbol > div {
    min-width: 0;
  }

  .asset-name strong,
  .market-symbol strong {
    display: block;
    min-width: 0;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .asset-name span,
  .market-symbol small {
    display: block;
    font-size: 7px !important;
    line-height: 1.25;
    margin-top: 2px;
  }

  .market-status i {
    width: 6px !important;
    height: 6px !important;
  }

  .market-change {
    max-width: 100%;
    padding: 4px 6px !important;
    font-size: 7px !important;
    line-height: 1.2;
  }

  .market-price,
  .market-card .market-price {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .market-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 0;
    font-size: 7px !important;
  }

  .market-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-spark {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 8px;
    width: 100%;
    height: 18px;
  }

  .market-note {
    margin-top: 10px !important;
    font-size: 8px !important;
    line-height: 1.55 !important;
  }

  /* AI section: balanced two-card flow, readable text. */
  .ai-earning-section {
    padding: 52px 0 !important;
  }

  .ai-intro-grid,
  .ai-future-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .ai-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .ai-panel,
  .ai-future-card,
  .ai-step {
    min-width: 0;
    padding: 17px !important;
    border-radius: 16px !important;
  }

  .ai-panel h3,
  .ai-future-card h3 {
    font-size: 18px !important;
    line-height: 1.25;
  }

  .ai-panel p,
  .ai-future-card p {
    font-size: 10px !important;
    line-height: 1.68 !important;
  }

  .ai-step {
    min-height: 0 !important;
  }

  .ai-step i {
    margin: 17px 0 10px !important;
    font-size: 18px !important;
  }

  .ai-step h3 {
    font-size: 13px !important;
  }

  .ai-step p,
  .ai-trust-list small {
    font-size: 9px !important;
    line-height: 1.58 !important;
  }

  .ai-faq {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .ai-disclaimer {
    padding: 12px !important;
    gap: 8px !important;
  }

  .ai-disclaimer p {
    font-size: 9px !important;
    line-height: 1.62 !important;
  }

  .investment-story {
    padding: 54px 0 58px !important;
  }

  .investment-story-heading {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  .investment-story-heading h2 {
    font-size: clamp(25px, 7.5vw, 31px) !important;
  }

  .investment-story-content {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .investment-story-lead {
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.78 !important;
  }

  .investment-story-lead p + p {
    margin-top: 17px;
  }

  .investment-story-timeline {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
  }

  .investment-story-step {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding-bottom: 19px !important;
  }

  .investment-story-step span {
    width: 34px !important;
    height: 34px !important;
    margin-left: -38px !important;
    font-size: 9px !important;
  }

  .investment-story-step strong {
    font-size: 14px !important;
  }

  .investment-story-step small {
    font-size: 9px !important;
    line-height: 1.58 !important;
  }

  /* FAQ remains full-width because the questions need readable measure. */
  .faq-item {
    min-width: 0;
    padding: 16px 15px !important;
    border-radius: 15px !important;
    margin-bottom: 11px !important;
  }

  .faq-item h3 {
    font-size: 14px !important;
    line-height: 1.35;
  }

  .faq-item p {
    font-size: 10px !important;
    line-height: 1.68 !important;
  }

  /* App strip: exactly three compact choices in one row. */
  .mtek-app-downloads {
    padding: 28px 12px 13px !important;
  }

  .mtek-app-downloads-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .mtek-app-downloads-heading {
    text-align: center;
    min-width: 0;
  }

  .mtek-app-downloads-heading span {
    font-size: 8px !important;
    letter-spacing: 1.35px !important;
  }

  .mtek-app-downloads-heading h2 {
    font-size: clamp(19px, 5.7vw, 23px) !important;
    line-height: 1.2 !important;
  }

  .mtek-app-downloads-heading p {
    font-size: 9px !important;
    line-height: 1.55 !important;
    margin-inline: auto;
    max-width: 340px;
  }

  .mtek-app-store-grid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    flex: none !important;
  }

  .mtek-app-store-link {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 5px !important;
    gap: 5px !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
    border-radius: 12px !important;
  }

  .mtek-app-store-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    font-size: 17px !important;
  }

  .mtek-app-store-copy {
    min-width: 0;
    width: 100%;
    align-items: center !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .mtek-app-store-copy small {
    max-width: 100%;
    font-size: 5px !important;
    letter-spacing: .65px !important;
    margin-bottom: 2px !important;
    white-space: normal !important;
  }

  .mtek-app-store-copy strong {
    max-width: 100%;
    font-size: 9px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  /* Universal centered images. */
  section img,
  .hero img,
  .about-image img {
    max-width: 100%;
  }

  /* The global footer must wrap rather than clip on narrow screens. */
  .site-footer,
  .dashboard-footer,
  .referral-footer,
  .page-footer,
  .notifications-footer,
  .footer {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    margin: 12px auto 8px !important;
    flex-wrap: wrap !important;
    line-height: 1.65 !important;
    font-size: 9px !important;
    white-space: normal !important;
  }

  .footer-terms-link {
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .feature-grid,
  .service-grid,
  .steps-grid,
  .why-grid,
  .contact-grid,
  .mission-grid,
  .ai-flow-grid {
    gap: 8px !important;
  }

  .feature-card,
  .service-card,
  .step-card,
  .why-card,
  .contact-card,
  .mission-card {
    padding-inline: 9px !important;
  }

  .feature-card h3,
  .service-card h3,
  .step-card h3,
  .why-card h3,
  .contact-card h3,
  .mission-card h2 {
    font-size: 14px !important;
  }

  .feature-card p,
  .service-card p,
  .step-card p,
  .why-card p,
  .contact-card p,
  .contact-card a,
  .mission-card p {
    font-size: 9px !important;
  }

  .market-grid {
    gap: 8px !important;
  }

  .market-card {
    padding: 10px !important;
  }

  .market-price,
  .market-card .market-price {
    font-size: 16px !important;
  }

  .mtek-app-store-link {
    padding-inline: 3px !important;
  }

  .mtek-app-store-copy strong {
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Desktop/laptop market density — 5 cards in a row. */
@media (min-width: 901px) {
  .market-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .market-card {
    min-width: 0;
    padding: 18px;
  }

  .market-symbol strong,
  .asset-name strong {
    font-size: 14px;
  }

  .market-price {
    font-size: 24px;
  }
}

/* Render long below-fold sections lazily without changing their content. */
.about,
.features,
.services,
.ai-earning-section,
.investment-story,
.how-it-works,
.why-us,
.mission,
.faq,
.contact,
.mtek-app-downloads {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

/* M TEK ecosystem roadmap — compact, reusable card language. */
.ecosystem-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,215,0,.055), transparent 25%),
    linear-gradient(180deg, #0b1220 0%, #0a101b 100%);
  border-top: 1px solid rgba(148,163,184,.08);
  border-bottom: 1px solid rgba(148,163,184,.08);
}

.ecosystem-heading {
  max-width: 860px;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ecosystem-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 24px 21px 22px;
  border-radius: 20px;
  border: 1px solid rgba(126,170,214,.13);
  background: linear-gradient(145deg, rgba(18,34,56,.94), rgba(9,21,37,.96));
  box-shadow: 0 16px 42px rgba(1,8,20,.18), inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ecosystem-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,200,76,.28);
  box-shadow: 0 20px 48px rgba(1,8,20,.24);
}

.ecosystem-index {
  position: absolute;
  top: 13px;
  right: 15px;
  color: rgba(245,200,76,.15);
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ecosystem-card i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 15px;
  color: #ffd700;
  background: rgba(255,215,0,.09);
  border: 1px solid rgba(255,215,0,.14);
  font-size: 20px;
}

.ecosystem-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
}

.ecosystem-card p {
  margin: 0;
  color: #9eacc0;
  font-size: 11px;
  line-height: 1.72;
}

.ecosystem-status {
  display: inline-flex;
  margin-top: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #62eeb2;
  background: rgba(55,214,160,.07);
  border: 1px solid rgba(55,214,160,.16);
  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
}

@media (max-width: 900px) {
  .ecosystem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ecosystem-section {
    padding: 50px 0 !important;
  }

  .ecosystem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .ecosystem-card {
    padding: 16px 11px 15px;
    border-radius: 16px;
  }

  .ecosystem-card i {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 13px;
    font-size: 17px;
  }

  .ecosystem-card h3 {
    font-size: 13px;
    line-height: 1.28;
  }

  .ecosystem-card p {
    font-size: 9px;
    line-height: 1.6;
  }

  .ecosystem-index {
    top: 9px;
    right: 9px;
    font-size: 24px;
  }
}