/*
Theme Name: astra2
Author: Yo
Version: 1.0
Description: A hybrid theme combining custom HTML and drag-and-drop editing.
*/


/* ============================================================
   1. RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============================================================
   2. DESIGN TOKENS  (CSS custom properties)
   ============================================================ */

:root {
  /* — Colour palette — */
  --mt-black:    #0a0a0a;   /* page background         */
  --mt-dark:     #111111;   /* card / section dark alt */
  --mt-panel:    #171717;   /* elevated surface        */
  --mt-border:   #2a2a2a;   /* dividers & outlines     */
  --mt-accent:   #e8531a;   /* primary brand orange    */
  --mt-accent2:  #ff7a3d;   /* accent hover / lighter  */
  --mt-steel:    #8a9aaa;   /* secondary body text     */
  --mt-text:     #e8e4dc;   /* primary text            */
  --mt-muted:    #6a6a6a;   /* disabled / placeholder  */

  /* — Typography — */
  --mt-font-display: 'Bebas Neue', sans-serif;
  --mt-font-body:    'DM Sans', sans-serif;

  /* — Spacing scale — */
  --mt-space-xs:   0.5rem;
  --mt-space-sm:   1rem;
  --mt-space-md:   2rem;
  --mt-space-lg:   4rem;
  --mt-space-xl:   7rem;

  /* — Transition presets — */
  --mt-ease-fast:   0.2s ease;
  --mt-ease-mid:    0.4s ease;
  --mt-ease-spring: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   3. BASE / GLOBAL
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  background:   var(--mt-black);
  color:        var(--mt-text);
  font-family:  var(--mt-font-body);
  font-size:    1rem;
  line-height:  1.6;
  overflow-x:   hidden;
  cursor:       none;     /* pairs with .mt-cursor / .mt-cursor-ring JS */
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}


/* ============================================================
   4. TYPOGRAPHY UTILITIES
   ============================================================ */

/* Display heading — Bebas Neue, large */
.mt-display {
  font-family:    var(--mt-font-display);
  letter-spacing: 0.03em;
  line-height:    0.95;
  color:          var(--mt-text);
}

/* Section heading size — fluid clamp */
.mt-h-section {
  font-family: var(--mt-font-display);
  font-size:   clamp(2.8rem, 5vw, 5rem);
  letter-spacing: 0.03em;
  line-height: 0.95;
  color:       var(--mt-text);
  margin-bottom: 1.5rem;
}

/* Hero heading size */
.mt-h-hero {
  font-family:    var(--mt-font-display);
  font-size:      clamp(3.5rem, 7vw, 7.5rem);
  line-height:    0.92;
  letter-spacing: 0.02em;
  color:          var(--mt-text);
}

/* CTA / banner heading */
.mt-h-cta {
  font-family:    var(--mt-font-display);
  font-size:      clamp(3rem, 7vw, 7rem);
  letter-spacing: 0.03em;
  color:          #fff;
  line-height:    0.9;
}

/* Body / paragraph */
.mt-body {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--mt-steel);
}

/* Small / caption */
.mt-small {
  font-size:      0.78rem;
  letter-spacing: 0.1em;
  color:          var(--mt-muted);
}

/* Label — eyebrow text above headings */
.mt-label {
  display:        flex;
  align-items:    center;
  gap:            0.8rem;
  font-size:      0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--mt-accent);
  margin-bottom:  1.2rem;
}

.mt-label::before {
  content:    '';
  width:      28px;
  height:     1px;
  background: var(--mt-accent);
  flex-shrink: 0;
}

/* Accent colour on any inline text */
.mt-accent-text {
  color: var(--mt-accent);
}

/* Muted colour on any inline text */
.mt-muted-text {
  color: var(--mt-muted);
}


/* ============================================================
   5. CUSTOM CURSOR
   ============================================================ */

.mt-cursor {
  width:        12px;
  height:       12px;
  background:   var(--mt-accent);
  border-radius: 50%;
  position:     fixed;
  top:          0;
  left:         0;
  pointer-events: none;
  z-index:      9999;
  transform:    translate(-50%, -50%);
  transition:   width var(--mt-ease-fast),
                height var(--mt-ease-fast),
                background var(--mt-ease-fast);
}

.mt-cursor-ring {
  width:          36px;
  height:         36px;
  border:         1px solid var(--mt-accent);
  border-radius:  50%;
  position:       fixed;
  top:            0;
  left:           0;
  pointer-events: none;
  z-index:        9998;
  transform:      translate(-50%, -50%);
  transition:     width 0.3s ease,
                  height 0.3s ease,
                  opacity 0.3s ease;
  opacity:        0.6;
}

/* Expanded state — applied via JS on hover of interactive elements */
.mt-cursor.expanded      { width: 20px;  height: 20px; }
.mt-cursor-ring.expanded { width: 56px;  height: 56px; opacity: 0.3; }


/* ============================================================
   6. LOADER
   ============================================================ */

.mt-loader {
  position:        fixed;
  inset:           0;
  background:      var(--mt-black);
  z-index:         10000;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2rem;
}

/* Wrap each letter of your brand name in a <span> inside .mt-loader-logo */
.mt-loader-logo {
  font-family:    var(--mt-font-display);
  font-size:      clamp(4rem, 10vw, 8rem);
  letter-spacing: 0.1em;
  color:          var(--mt-text);
  overflow:       hidden;
}

.mt-loader-logo span {
  display:   inline-block;
  transform: translateY(110%);
  animation: mt-slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger each letter — add more if your brand name is longer */
.mt-loader-logo span:nth-child(1) { animation-delay: 0.10s; }
.mt-loader-logo span:nth-child(2) { animation-delay: 0.18s; }
.mt-loader-logo span:nth-child(3) { animation-delay: 0.25s; }
.mt-loader-logo span:nth-child(4) { animation-delay: 0.32s; }
.mt-loader-logo span:nth-child(5) { animation-delay: 0.39s; }
.mt-loader-logo span:nth-child(6) { animation-delay: 0.46s; }
.mt-loader-logo span:nth-child(7) { animation-delay: 0.53s; }
.mt-loader-logo span:nth-child(8) { animation-delay: 0.60s; }
.mt-loader-logo span:nth-child(9) { animation-delay: 0.67s; }

.mt-loader-bar-wrap {
  width:      clamp(200px, 40vw, 400px);
  height:     1px;
  background: var(--mt-border);
  overflow:   hidden;
}

.mt-loader-bar {
  height:     100%;
  width:      0%;
  background: var(--mt-accent);
  animation:  mt-loadBar 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

.mt-loader-count {
  font-family:    var(--mt-font-display);
  font-size:      0.9rem;
  letter-spacing: 0.3em;
  color:          var(--mt-muted);
}

/* Applied by JS when loading is done */
.mt-loader-exit {
  animation: mt-fadeOut 0.6s ease forwards;
}


/* ============================================================
   7. NAVIGATION
   ============================================================ */

.mt-nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.5rem var(--mt-lg, 4rem);
  transition:      background var(--mt-ease-mid),
                   padding    var(--mt-ease-mid);
}

/* Adds glass blur when page is scrolled — applied via JS */
.mt-nav.scrolled {
  background:     rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  padding:        1rem var(--mt-lg, 4rem);
  border-bottom:  1px solid var(--mt-border);
}

.mt-nav-logo {
  font-family:    var(--mt-font-display);
  font-size:      1.8rem;
  letter-spacing: 0.12em;
  color:          var(--mt-text);
  transition:     color var(--mt-ease-fast);
}

.mt-nav-logo span { color: var(--mt-accent); }

.mt-nav-links {
  display: flex;
  gap:     2.5rem;
}

.mt-nav-links a {
  font-size:      0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--mt-steel);
  position:       relative;
  transition:     color var(--mt-ease-fast);
}

.mt-nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--mt-accent);
  transition: width 0.3s ease;
}

.mt-nav-links a:hover            { color: var(--mt-text); }
.mt-nav-links a:hover::after     { width: 100%; }

.mt-nav-cta {
  font-family:    var(--mt-font-body);
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--mt-black);
  background:     var(--mt-accent);
  border:         none;
  padding:        0.65rem 1.6rem;
  cursor:         none;
  transition:     background var(--mt-ease-fast),
                  transform  var(--mt-ease-fast);
}

.mt-nav-cta:hover {
  background: var(--mt-accent2);
  transform:  translateY(-1px);
}


/* ============================================================
   8. BUTTONS
   ============================================================ */

/* Solid accent — primary action */
.mt-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.75rem;
  background:     var(--mt-accent);
  color:          #fff;
  font-family:    var(--mt-font-body);
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        1rem 2rem;
  border:         none;
  cursor:         none;
  transition:     background var(--mt-ease-fast),
                  transform  var(--mt-ease-fast),
                  gap        var(--mt-ease-fast);
}

.mt-btn:hover {
  background: var(--mt-accent2);
  transform:  translateY(-2px);
  gap:        1rem;
}

/* Ghost — underline-only secondary action */
.mt-btn-ghost {
  font-size:      0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--mt-muted);
  border-bottom:  1px solid var(--mt-border);
  padding-bottom: 2px;
  transition:     color        var(--mt-ease-fast),
                  border-color var(--mt-ease-fast);
}

.mt-btn-ghost:hover {
  color:        var(--mt-text);
  border-color: var(--mt-steel);
}

/* White — for use on accent/orange backgrounds */
.mt-btn-white {
  display:        inline-flex;
  align-items:    center;
  gap:            0.75rem;
  background:     #fff;
  color:          var(--mt-accent);
  font-family:    var(--mt-font-body);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        1rem 2rem;
  border:         none;
  cursor:         none;
  transition:     background var(--mt-ease-fast),
                  transform  var(--mt-ease-fast);
}

.mt-btn-white:hover {
  background: #f0f0f0;
  transform:  translateY(-2px);
}

/* Outline white — secondary on accent/orange backgrounds */
.mt-btn-outline-white {
  display:        inline-flex;
  align-items:    center;
  gap:            0.75rem;
  background:     transparent;
  color:          #fff;
  font-family:    var(--mt-font-body);
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        1rem 2rem;
  border:         1px solid rgba(255, 255, 255, 0.5);
  cursor:         none;
  transition:     border-color var(--mt-ease-fast),
                  background   var(--mt-ease-fast);
}

.mt-btn-outline-white:hover {
  border-color: #fff;
  background:   rgba(255, 255, 255, 0.08);
}


/* ============================================================
   9. SECTION LAYOUT HELPERS
   ============================================================ */

/* Standard section padding */
.mt-section {
  padding: var(--mt-space-xl) var(--mt-space-lg);
}

/* Two-column intro (heading left, body + action right) */
.mt-section-intro {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           4rem;
  align-items:   end;
  margin-bottom: 4rem;
}

/* Surface variants */
.mt-bg-black  { background: var(--mt-black); }
.mt-bg-dark   { background: var(--mt-dark);  }
.mt-bg-panel  { background: var(--mt-panel); }
.mt-bg-accent { background: var(--mt-accent); }

/* Hairline-gap grid (used for service / testimonial / machine grids) */
.mt-grid-gap {
  display:    grid;
  gap:        1px;
  background: var(--mt-border);
}

.mt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mt-grid-4 { grid-template-columns: repeat(4, 1fr); }


/* ============================================================
   10. SCROLL-REVEAL ANIMATIONS
   ============================================================ */

/*
 * Add one of these classes to any element.
 * JavaScript (IntersectionObserver) adds .visible when the
 * element enters the viewport. See the JS snippet in the docs.
 */

.mt-reveal {
  opacity:    0;
  transform:  translateY(40px);
  transition: opacity   var(--mt-ease-spring),
              transform var(--mt-ease-spring);
}

.mt-reveal-left {
  opacity:    0;
  transform:  translateX(-40px);
  transition: opacity   var(--mt-ease-spring),
              transform var(--mt-ease-spring);
}

.mt-reveal-right {
  opacity:    0;
  transform:  translateX(40px);
  transition: opacity   var(--mt-ease-spring),
              transform var(--mt-ease-spring);
}

.mt-reveal.visible,
.mt-reveal-left.visible,
.mt-reveal-right.visible {
  opacity:   1;
  transform: translate(0);
}

/* Stagger siblings within the same parent */
.mt-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.mt-stagger > *:nth-child(2) { transition-delay: 0.15s; }
.mt-stagger > *:nth-child(3) { transition-delay: 0.25s; }
.mt-stagger > *:nth-child(4) { transition-delay: 0.35s; }
.mt-stagger > *:nth-child(5) { transition-delay: 0.45s; }
.mt-stagger > *:nth-child(6) { transition-delay: 0.55s; }

/* Manual stagger overrides */
.mt-delay-1 { transition-delay: 0.10s; }
.mt-delay-2 { transition-delay: 0.20s; }
.mt-delay-3 { transition-delay: 0.30s; }
.mt-delay-4 { transition-delay: 0.40s; }
.mt-delay-5 { transition-delay: 0.50s; }


/* ============================================================
   11. MARQUEE / TICKER
   ============================================================ */

.mt-marquee {
  border-top:    1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  padding:       1.1rem 0;
  overflow:      hidden;
  background:    var(--mt-panel);
}

.mt-marquee-track {
  display:     flex;
  white-space: nowrap;
  animation:   mt-marquee 20s linear infinite;
}

/* Each item inside .mt-marquee-track */
.mt-marquee-item {
  display:        inline-flex;
  align-items:    center;
  gap:            1.5rem;
  padding:        0 2.5rem;
  font-family:    var(--mt-font-display);
  font-size:      0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--mt-muted);
}

/* Accent dot separator inside .mt-marquee-item */
.mt-marquee-dot {
  width:        4px;
  height:       4px;
  background:   var(--mt-accent);
  border-radius: 50%;
  flex-shrink:  0;
}


/* ============================================================
   12. CARD COMPONENTS
   ============================================================ */

/* ── Service card ── */
.mt-service-card {
  background:  var(--mt-panel);
  padding:     2.5rem;
  position:    relative;
  overflow:    hidden;
  transition:  background var(--mt-ease-mid);
}

.mt-service-card::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--mt-accent);
  transition: width 0.4s ease;
}

.mt-service-card:hover            { background: #1c1c1c; }
.mt-service-card:hover::after     { width: 100%; }

.mt-service-num {
  font-family: var(--mt-font-display);
  font-size:   3.5rem;
  color:       var(--mt-border);
  line-height: 1;
  margin-bottom: 1.5rem;
  transition:  color var(--mt-ease-mid);
}

.mt-service-card:hover .mt-service-num { color: rgba(232, 83, 26, 0.15); }

.mt-service-icon {
  width:         42px;
  height:        42px;
  margin-bottom: 1.2rem;
  color:         var(--mt-accent);
}

.mt-service-title {
  font-family:    var(--mt-font-display);
  font-size:      1.6rem;
  letter-spacing: 0.05em;
  color:          var(--mt-text);
  margin-bottom:  0.8rem;
}

.mt-service-desc {
  font-size:   0.88rem;
  line-height: 1.7;
  color:       var(--mt-muted);
}

/* ── Machine / product card ── */
.mt-machine-card {
  background: var(--mt-dark);
  position:   relative;
  overflow:   hidden;
  cursor:     none;
}

.mt-machine-card.large { grid-row: 1 / 3; }

.mt-machine-img {
  width:      100%;
  height:     100%;
  min-height: 200px;
  background: #0f0f0f;
  display:    flex;
  align-items:  center;
  justify-content: center;
  padding:    2rem;
  position:   relative;
  overflow:   hidden;
}

.mt-machine-card.large .mt-machine-img { min-height: 420px; }

.mt-machine-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(232, 83, 26, 0);
  transition: background 0.4s ease;
}

.mt-machine-card:hover .mt-machine-overlay { background: rgba(232, 83, 26, 0.08); }

.mt-machine-label {
  padding:     1.2rem 1.5rem;
  border-top:  1px solid var(--mt-border);
  display:     flex;
  justify-content: space-between;
  align-items: center;
}

.mt-machine-label-name {
  font-size:      0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--mt-text);
  font-weight:    500;
}

.mt-machine-label-cat {
  font-size:      0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--mt-muted);
}

.mt-machine-arrow {
  width:       28px;
  height:      28px;
  border:      1px solid var(--mt-border);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--mt-steel);
  font-size:   0.8rem;
  transition:  background    var(--mt-ease-fast),
               color         var(--mt-ease-fast),
               border-color  var(--mt-ease-fast);
}

.mt-machine-card:hover .mt-machine-arrow {
  background:   var(--mt-accent);
  color:        white;
  border-color: var(--mt-accent);
}

/* Accent top-bar card (used in hero panel) */
.mt-accent-card {
  background: var(--mt-panel);
  border:     1px solid var(--mt-border);
  position:   relative;
  overflow:   hidden;
}

.mt-accent-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, var(--mt-accent), transparent);
}

/* ── Testimonial card ── */
.mt-testimonial-card {
  background:  var(--mt-black);
  padding:     2.5rem;
  position:    relative;
  transition:  background var(--mt-ease-mid);
}

.mt-testimonial-card:hover { background: var(--mt-panel); }

.mt-t-quote {
  font-family:   Georgia, serif;
  font-size:     2.5rem;
  color:         var(--mt-accent);
  line-height:   1;
  margin-bottom: 1rem;
}

.mt-t-text {
  font-size:     0.9rem;
  line-height:   1.75;
  color:         var(--mt-steel);
  margin-bottom: 2rem;
}

.mt-t-author {
  display:      flex;
  gap:          0.8rem;
  align-items:  center;
  padding-top:  1.5rem;
  border-top:   1px solid var(--mt-border);
}

.mt-t-avatar {
  width:           36px;
  height:          36px;
  background:      var(--mt-border);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--mt-font-display);
  font-size:       1rem;
  color:           var(--mt-accent);
  flex-shrink:     0;
}

.mt-t-name {
  font-size:     0.82rem;
  font-weight:   500;
  color:         var(--mt-text);
  margin-bottom: 0.1rem;
}

.mt-t-role {
  font-size:      0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--mt-muted);
}


/* ============================================================
   13. STAT / COUNTER BLOCK
   ============================================================ */

.mt-stat-item { text-align: center; }

.mt-stat-number {
  font-family: var(--mt-font-display);
  font-size:   clamp(3rem, 5vw, 5.5rem);
  color:       var(--mt-text);
  line-height: 1;
  display:     block;
}

.mt-stat-number .mt-stat-accent { color: var(--mt-accent); }

.mt-stat-label {
  font-size:      0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--mt-muted);
  margin-top:     0.6rem;
  display:        block;
}

/* Watermark text (the huge ghost word behind stats) */
.mt-watermark-section {
  position:   relative;
  overflow:   hidden;
}

.mt-watermark-section::before {
  content:        attr(data-watermark);  /* set data-watermark="YOUR TEXT" */
  font-family:    var(--mt-font-display);
  font-size:      clamp(8rem, 18vw, 18rem);
  position:       absolute;
  left:           50%;
  top:            50%;
  transform:      translate(-50%, -50%);
  color:          rgba(255, 255, 255, 0.02);
  letter-spacing: 0.1em;
  white-space:    nowrap;
  pointer-events: none;
  user-select:    none;
}

.mt-watermark-section > * {
  position: relative;
  z-index:  1;
}


/* ============================================================
   14. PROCESS / TIMELINE STEPS
   ============================================================ */

.mt-steps {
  margin-top: 4rem;
  position:   relative;
}

/* Vertical accent line running down the left side */
.mt-steps::before {
  content:    '';
  position:   absolute;
  left:       2.5rem;
  top:        1.5rem;
  bottom:     1.5rem;
  width:      1px;
  background: linear-gradient(to bottom, var(--mt-accent), var(--mt-border));
}

.mt-step {
  display:      grid;
  grid-template-columns: 5rem 1fr;
  gap:          2rem;
  padding:      2.5rem 0;
  border-bottom: 1px solid var(--mt-border);
  align-items:  start;
  position:     relative;
  transition:   background var(--mt-ease-mid);
}

.mt-step:last-child   { border-bottom: none; }
.mt-step:hover        { background: rgba(255, 255, 255, 0.02); }

/* Orange dot on the vertical line */
.mt-step-node {
  width:        14px;
  height:       14px;
  background:   var(--mt-accent);
  border-radius: 50%;
  position:     absolute;
  left:         43px;
  top:          2.85rem;
  z-index:      2;
  box-shadow:   0 0 0 3px var(--mt-panel),
                0 0 0 5px rgba(232, 83, 26, 0.3);
}

.mt-step-num {
  font-family: var(--mt-font-display);
  font-size:   2.8rem;
  color:       var(--mt-border);
  line-height: 1;
  text-align:  center;
  padding-top: 0.15rem;
  position:    relative;
  z-index:     1;
  transition:  color var(--mt-ease-mid);
}

.mt-step:hover .mt-step-num { color: var(--mt-accent); }

.mt-step-title {
  font-family:    var(--mt-font-display);
  font-size:      1.8rem;
  letter-spacing: 0.04em;
  color:          var(--mt-text);
  margin-bottom:  0.5rem;
}

.mt-step-desc {
  font-size:   0.88rem;
  line-height: 1.75;
  color:       var(--mt-muted);
}


/* ============================================================
   15. SCANLINE EFFECT
   ============================================================ */

/*
 * Place .mt-scanline as a direct child of a relative-positioned
 * container with overflow: hidden to get the scanning line effect.
 */
.mt-scanline {
  position:   absolute;
  top:        -4px;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 83, 26, 0.5),
    transparent
  );
  animation:  mt-scan 3s ease-in-out infinite;
  pointer-events: none;
}


/* ============================================================
   16. SCROLL INDICATOR
   ============================================================ */

.mt-scroll-indicator {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
}

.mt-scroll-label {
  font-size:      0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--mt-muted);
}

.mt-scroll-line {
  width:    1px;
  height:   40px;
  background: var(--mt-border);
  position: relative;
  overflow: hidden;
}

.mt-scroll-line::after {
  content:    '';
  position:   absolute;
  top:        -100%;
  width:      100%;
  height:     40%;
  background: var(--mt-accent);
  animation:  mt-scrollDown 1.5s ease infinite;
}


/* ============================================================
   17. HERO BACKGROUND EFFECTS
   ============================================================ */

/* Subtle radial glow behind hero content */
.mt-hero-glow {
  position:       absolute;
  inset:          0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(232, 83, 26, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(232, 83, 26, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* Technical grid overlay */
.mt-hero-grid {
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:  none;
  mask-image:      radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* CTA section grid overlay */
.mt-cta-grid {
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:  none;
}

/* Hero badge / tag */
.mt-hero-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-size:      0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--mt-accent);
  border:         1px solid rgba(232, 83, 26, 0.3);
  padding:        0.4rem 1rem;
  margin-bottom:  2rem;
}

/* Pulsing live-dot inside .mt-hero-tag */
.mt-hero-tag::before {
  content:       '';
  width:         6px;
  height:        6px;
  background:    var(--mt-accent);
  border-radius: 50%;
  animation:     mt-pulse 2s infinite;
}


/* ============================================================
   18. FOOTER
   ============================================================ */

.mt-footer {
  background:  var(--mt-panel);
  padding:     4rem;
  border-top:  1px solid var(--mt-border);
}

.mt-footer-grid {
  display:       grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:           3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--mt-border);
  margin-bottom: 2rem;
}

.mt-footer-brand {
  font-family:    var(--mt-font-display);
  font-size:      2rem;
  letter-spacing: 0.1em;
  color:          var(--mt-text);
  margin-bottom:  1rem;
}

.mt-footer-brand span { color: var(--mt-accent); }

.mt-footer-desc {
  font-size:     0.85rem;
  line-height:   1.7;
  color:         var(--mt-muted);
  margin-bottom: 1.5rem;
}

.mt-footer-col-title {
  font-size:      0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--mt-accent);
  margin-bottom:  1.2rem;
}

.mt-footer-links {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.mt-footer-links a {
  font-size:  0.85rem;
  color:      var(--mt-muted);
  transition: color var(--mt-ease-fast);
}

.mt-footer-links a:hover { color: var(--mt-text); }

.mt-footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.mt-footer-copy {
  font-size:      0.75rem;
  letter-spacing: 0.08em;
  color:          var(--mt-muted);
}

.mt-footer-socials {
  display: flex;
  gap:     1rem;
}

.mt-social-link {
  width:           32px;
  height:          32px;
  border:          1px solid var(--mt-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--mt-muted);
  font-size:       0.75rem;
  transition:      border-color var(--mt-ease-fast),
                   color        var(--mt-ease-fast);
}

.mt-social-link:hover {
  border-color: var(--mt-accent);
  color:        var(--mt-accent);
}


/* ============================================================
   19. MACHINE ILLUSTRATION ANIMATIONS
   ============================================================ */

/* Floating animations for SVG illustrations */
.mt-float-ud   { animation: mt-floatUD 4s ease-in-out infinite; }
.mt-float-lr   { animation: mt-floatLR 5s ease-in-out infinite; }
.mt-float-ud-2 { animation: mt-floatUD 3.5s ease-in-out infinite 0.5s; }
.mt-float-ud-3 { animation: mt-floatUD 6s   ease-in-out infinite 1.0s; }

/* Gear rotations (set transform-origin to gear centre via inline style) */
.mt-rotate-cw  { animation: mt-rotateCW  8s linear infinite; }
.mt-rotate-ccw { animation: mt-rotateCCW 4s linear infinite; }
.mt-rotate-med { animation: mt-rotateCW  6s linear infinite; }


/* ============================================================
   20. KEYFRAME LIBRARY
   ============================================================ */

@keyframes mt-slideUp {
  to { transform: translateY(0); }
}

@keyframes mt-loadBar {
  to { width: 100%; }
}

@keyframes mt-fadeOut {
  to { opacity: 0; visibility: hidden; }
}

@keyframes mt-revealUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mt-revealRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.5); }
}

@keyframes mt-scan {
  0%   { top: -4px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes mt-scrollDown {
  to { top: 200%; }
}

@keyframes mt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes mt-rotateCW {
  to { transform: rotate(360deg); }
}

@keyframes mt-rotateCCW {
  to { transform: rotate(-360deg); }
}

@keyframes mt-floatUD {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes mt-floatLR {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-8px); }
}


/* ============================================================
   21. RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 900px) {
  .mt-nav          { padding: 1.2rem 1.5rem; }
  .mt-nav.scrolled { padding: 1rem  1.5rem; }
  .mt-nav-links    { display: none; }

  .mt-section      { padding: 5rem 1.5rem; }

  .mt-section-intro    { grid-template-columns: 1fr; }
  .mt-grid-3           { grid-template-columns: 1fr; }
  .mt-grid-4           { grid-template-columns: repeat(2, 1fr); }

  .mt-footer-grid  { grid-template-columns: 1fr 1fr; }
  .mt-footer-bottom { flex-direction: column; gap: 1rem; }

  .mt-steps::before { display: none; }
  .mt-step-node     { display: none; }
  .mt-step { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
}

@media (max-width: 480px) {
  .mt-footer-grid  { grid-template-columns: 1fr; }
  .mt-grid-4       { grid-template-columns: 1fr; }
  .mt-btn,
  .mt-btn-white,
  .mt-btn-outline-white { width: 100%; justify-content: center; }
}