/* ================================================================
   MozProTech — Section Tools
   Font: Inter · Dark blue #04101f · Cyan #00e5c8
   Responsive: desktop → tablet → mobile
================================================================ */

/* ── Google Font ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Reset ───────────────────────────────────────────────────── */
.mzt *,
.mzt *::before,
.mzt *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Section shell ───────────────────────────────────────────── */
.mzt {
  background: #050b18;
  padding: 96px 48px 108px;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}

/* ── Ambient orbs ────────────────────────────────────────────── */
.mzt-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(88px);
}
.mzt-orb-tr {
  width: 680px; height: 680px;
  top: -200px; right: -140px;
  background: radial-gradient(circle, rgba(0,229,200,.092) 0%, transparent 65%);
}
.mzt-orb-bl {
  width: 480px; height: 480px;
  bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(10,55,140,.20) 0%, transparent 65%);
}
.mzt-orb-mid {
  width: 420px; height: 420px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,229,200,.048) 0%, transparent 65%);
}

/* ── Inner wrapper ───────────────────────────────────────────── */
.mzt-wrap {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ── Header ──────────────────────────────────────────────────── */
.mzt-hd {
  text-align: center;
  margin-bottom: 64px;
  animation: mzt-fadein-down .85s cubic-bezier(.23,1,.32,1) both;
}

.mzt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #00e5c8;
  border: 1px solid rgba(0,229,200,.22);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 24px;
  background: rgba(0,229,200,.05);
}

.mzt-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e5c8;
  box-shadow: 0 0 8px rgba(0,229,200,.8);
  animation: mzt-blink 2s ease-in-out infinite;
  flex-shrink: 0;
}

.mzt-title {
  font-family: 'Inter', sans-serif;
  font-size: (30px, 4.5vw, 52px);
  font-weight: 800;
  color: #d8eaf4;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.mzt-title em {
  font-family: 'Rosnoc', sans-serif;
  background: linear-gradient(95deg, #00cacc 0%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stage (diagram area) ────────────────────────────────────── */
.mzt-stage {
  position: relative;
  width: 100%;
  height: 480px;
}

/* ── SVG lines layer ─────────────────────────────────────────── */
.mzt-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Tool cards ──────────────────────────────────────────────── */
.mzt-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .5s ease;
}
.mzt-card.visible { opacity: 1; }

.mzt-face {
  width: 84px; height: 84px;
  background: linear-gradient(148deg, #0f2442 0%, #081828 100%);
  border: 1px solid rgba(0,229,200,.13);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition:
    transform .42s cubic-bezier(.23,1,.32,1),
    border-color .42s ease,
    box-shadow .42s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.42),
    6px 14px 36px rgba(0,0,0,.62);
}

/* Shine overlay */
.mzt-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 55%);
}

.mzt-face img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: filter .3s ease, transform .32s ease;
}

/* 3D tilt — left leans left, right leans right */
.mzt-card.left  .mzt-face { transform: perspective(700px) rotateY(-11deg) rotateX(6deg); }
.mzt-card.right .mzt-face { transform: perspective(700px) rotateY(11deg) rotateX(6deg); }

/* Hover — flatten + lift */
.mzt-card:hover .mzt-face {
  transform: perspective(700px) rotateY(0deg) rotateX(0deg) translateY(-10px) !important;
  border-color: rgba(0,229,200,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.4),
    8px 24px 52px rgba(0,0,0,.7),
    0 0 34px rgba(0,229,200,.22);
}
.mzt-card:hover .mzt-face img {
  filter: brightness(1.1) saturate(1.18);
  transform: scale(1.06);
}

.mzt-card span {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(130,180,215,.38);
  white-space: nowrap;
}

/* ── Center node ─────────────────────────────────────────────── */
.mzt-center {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  transition: opacity .5s ease .25s;
}
.mzt-center.visible { opacity: 1; }

/* Pulsing rings */
.mzt-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,229,200,.16);
  pointer-events: none;
  animation: mzt-ring-pulse 3.6s ease-in-out infinite;
}
.mzt-ring.a { width: 150px; height: 150px; animation-delay: 0s; }
.mzt-ring.b { width: 218px; height: 218px; animation-delay: 1.2s; border-color: rgba(0,229,200,.08); }
.mzt-ring.c { width: 286px; height: 286px; animation-delay: 2.4s; border-color: rgba(0,229,200,.04); }

/* The logo card */
.mzt-node {
  position: relative;
  z-index: 2;
  width: 74px; height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(148deg, #112241 0%, #07101e 100%);
  border: 1.5px solid rgba(0,229,200,.65);
  border-radius: 20px;
  cursor: default;
  transform: perspective(900px) rotateX(5deg);
  transition: transform .46s cubic-bezier(.23,1,.32,1), box-shadow .46s ease;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.09),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    0 0 56px rgba(0,229,200,.26),
    0 18px 58px rgba(0,0,0,.8);
}
.mzt-node:hover {
  transform: perspective(900px) rotateX(0deg) translateY(-8px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.1),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    0 0 88px rgba(0,229,200,.40),
    0 26px 78px rgba(0,0,0,.86);
}
.mzt-node img {
  width: 48px; height: 48px;
  object-fit: contain;
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes mzt-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .22; }
}

@keyframes mzt-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.07); opacity: .28; }
}

@keyframes mzt-fadein-down {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Tablet — 768px to 1024px */
@media (max-width: 1024px) {
  .mzt { padding: 72px 32px 80px; }
  .mzt-stage { height: 400px; }
  .mzt-face  { width: 72px; height: 72px; padding: 14px; border-radius: 18px; }
  .mzt-node  { width: 64px; height: 64px; border-radius: 17px; }
  .mzt-node img { width: 40px; height: 40px; }
  .mzt-ring.a { width: 128px; height: 128px; }
  .mzt-ring.b { width: 188px; height: 188px; }
  .mzt-ring.c { width: 248px; height: 248px; }
}

/* Mobile — up to 767px */
@media (max-width: 767px) {
  .mzt { padding: 56px 20px 64px; }
  .mzt-hd { margin-bottom: 40px; }

  .mzt-title { font-size: clamp(26px, 7vw, 36px); letter-spacing: -1px; }

  .mzt-stage { height: 340px; }

  .mzt-face  { width: 58px; height: 58px; padding: 11px; border-radius: 14px; }
  .mzt-card span { font-size: 8px; letter-spacing: 0.8px; }

  .mzt-node  { width: 56px; height: 56px; border-radius: 14px; }
  .mzt-node img { width: 34px; height: 34px; }

  .mzt-ring.a { width: 100px; height: 100px; }
  .mzt-ring.b { width: 152px; height: 152px; }
  .mzt-ring.c { width: 204px; height: 204px; }

  .mzt-orb-tr { width: 340px; height: 340px; }
  .mzt-orb-bl { width: 260px; height: 260px; }
}

/* Very small — up to 420px */
@media (max-width: 420px) {
  .mzt-stage { height: 300px; }
  .mzt-face  { width: 50px; height: 50px; padding: 9px; border-radius: 12px; }
  .mzt-card span { display: none; }
  .mzt-node  { width: 50px; height: 50px; border-radius: 13px; }
  .mzt-node img { width: 30px; height: 30px; }
}