.mzj-page {
      --header-h: 85px;
      --header-buffer: 16px;
      --container-max: 1400px;
      --navy: #0A1628;
      --navy-d: #060D1A;
      --navy-c: #132840;
      --cyan: #00E5C7;
      --magenta: #FF3366;
      --blue: #4DA8FF;
      --violet: #9966FF;
      --amber: #F59E0B;
      --emerald: #10B981;
      --green: #10B981;
      --white: #FFFFFF;
      --g100: #F0F4F8;
      --g200: #E2E8F0;
      --g300: #CBD5E1;
      --g400: #94A3B8;
      --g500: #64748B;
      --g600: #475569;
      --text-l: #0A1628;
      --text-l-mid: #475569;
      --text-l-soft: #475569;
      --bg-l: #F8FAFC;
      --w-l: #FFFFFF;
      --border-l: #E2E8F0;
      --border-l-soft: rgba(15, 23, 42, 0.06);
      --cyan-text: #0F766E;
      --magenta-text: #BE1F47;
      --blue-text: #1E5BB8;
      --violet-text: #6B3FB5;
      --amber-text: #B45309;
      --emerald-text: #047857;
      --svg-magenta: #FF6688;
      --svg-violet: #B891FF;
      --svg-emerald: #34D399;
      font-family: 'Geist', system-ui, -apple-system, sans-serif;
      color: var(--white);
      line-height: 1.6;
    }

    .mzj-page *,
    .mzj-page *::before,
    .mzj-page *::after {
      box-sizing: border-box;
    }

    @media (max-width: 1023px) {
      .mzj-page {
        --header-h: 65px;
        --header-buffer: 12px;
      }
    }

    .mzj-page section[id],
    .mzj-page .mzj-hero[id] {
      scroll-margin-top: calc(var(--header-h) + var(--header-buffer));
    }

    :root {
      --navy: #0A1628;
      --navy-d: #060D1A;
      --navy-m: #0F1F35;
      --navy-c: #132840;
      --cyan: #00E5C7;
      --cyan-d: rgba(0, 229, 199, 0.12);
      --cyan-g: rgba(0, 229, 199, 0.25);
      --cyan-mid: rgba(0, 229, 199, 0.06);
      --emerald: #059669;
      --emerald-d: rgba(5, 150, 105, 0.10);
      --emerald-g: rgba(5, 150, 105, 0.22);
      --emerald-2: #34D399;
      --green: #10B981;
      --amber: #F59E0B;
      --blue: #4DA8FF;
      --violet: #9966FF;
      --sapphire: #2563EB;
      --magenta: #FF3366;
      --orange: #EA580C;
      --white: #FFFFFF;
      --g100: #F0F4F8;
      --g200: #E2E8F0;
      --g300: #CBD5E1;
      --g400: #94A3B8;
      --g500: #64748B;
      --g600: #475569;
      --text: #CBD5E1;
      --fh: 'Geist', -apple-system, system-ui, sans-serif;
      --fb: 'Inter', -apple-system, system-ui, sans-serif;
      --fm: 'JetBrains Mono', monospace;
      --nh: var(--header-h);
      --nav-h: 72px;
      --r: 16px;
      --rs: 8px;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
    }

    :root {
      --nd: var(--navy-d);
      --nm: var(--navy-m);
      --nc: var(--navy-c);
      --nv: var(--navy);
      --em: var(--emerald);
      --em-d: var(--emerald-d);
      --em-g: var(--emerald-g);
      --em2: var(--emerald-2);
      --cy: var(--cyan);
      --cy-d: var(--cyan-d);
      --gn: var(--green);
      --am: var(--amber);
      --bl: var(--blue);
      --vt: var(--violet);
      --sp: var(--sapphire);
      --mg: var(--magenta);
      --or: var(--orange);
      --wh: var(--white);
      --g2: var(--g200);
      --g3: var(--g300);
      --g4: var(--g400);
      --g6: var(--g600);
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--fb);
      background: var(--navy-d);
      color: var(--text);
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -0.005em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-variation-settings: "opsz" 16;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: var(--nh);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      background: rgba(6, 13, 26, .96);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(5, 150, 105, .14);
      transition: all .3s var(--ease)
    }

    .nav-logo {
      font-family: var(--fh);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--wh);
      text-decoration: none;
      letter-spacing: -.02em
    }

    .nav-logo em {
      color: var(--cy);
      font-style: normal
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none
    }

    .nav-links a {
      font-size: .85rem;
      font-weight: 500;
      color: var(--g4);
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 8px;
      transition: color .2s, background .2s
    }

    .nav-links a:hover {
      color: var(--wh);
      background: rgba(255, 255, 255, .05)
    }

    .nav-links a.cur {
      color: var(--em2)
    }

    .nav-btn {
      background: var(--em);
      color: var(--wh) !important;
      padding: 9px 20px;
      border-radius: 50px;
      font-weight: 700;
      font-size: .82rem;
      transition: all .2s !important;
      box-shadow: 0 0 28px rgba(5, 150, 105, .32)
    }

    .nav-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 28px rgba(5, 150, 105, .52) !important;
      background: #047857 !important
    }

    .bc {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: calc(var(--nh) + 24px) 48px 0;
      font-size: .78rem;
      color: var(--g100);
      font-weight: 500
    }

    .bc a {
      color: var(--g6);
      text-decoration: none;
      transition: color .2s
    }

    .bc a:hover {
      color: var(--em2)
    }

    .bc-sep {
      color: rgba(255, 255, 255, .12)
    }

    .bc-cur {
      color: var(--em2);
      font-weight: 600
    }

    section {
      position: relative;
      z-index: 1
    }

    .C {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 48px
    }

    .tag {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--em2);
      margin-bottom: 14px;
      display: inline-block
    }

    .tag.a {
      color: var(--am)
    }

    .tag.b {
      color: var(--bl)
    }

    .tag.v {
      color: var(--vt)
    }

    .tag.r {
      color: var(--mg)
    }

    .tag.c {
      color: var(--cy)
    }

    .h2 {
      font-family: var(--fh);
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 800;
      color: var(--wh);
      letter-spacing: -0.04em;
      line-height: 1.08;
      margin-bottom: 18px
    }

    .sub {
      font-size: 1rem;
      color: var(--g100);
      font-weight: 500;
      line-height: 1.7;
      max-width: 580px
    }

    .dv {
      width: 44px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--em), transparent);
      margin: 14px 0 22px
    }

    @keyframes fU {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fI {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .3;
        transform: scale(.65)
      }
    }

    .bp {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--em);
      color: var(--wh);
      padding: 14px 28px;
      border-radius: 50px;
      font-family: var(--fh);
      font-weight: 700;
      font-size: .92rem;
      text-decoration: none;
      transition: all .25s var(--ease);
      box-shadow: 0 0 36px rgba(5, 150, 105, .22)
    }

    .bp:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(5, 150, 105, .42);
      background: #047857
    }

    .bs {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255, 255, 255, .15);
      color: var(--wh);
      padding: 14px 24px;
      border-radius: 50px;
      font-weight: 500;
      font-size: .92rem;
      text-decoration: none;
      transition: all .25s var(--ease)
    }

    .bs:hover {
      border-color: var(--em2);
      color: var(--em2);
      transform: translateY(-2px)
    }

    .hero-wrap {
      position: relative;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 80% 10%, rgba(5, 150, 105, .12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 0% 90%, rgba(0, 229, 199, .05) 0%, transparent 55%),
        radial-gradient(ellipse 40% 45% at 50% 55%, rgba(52, 211, 153, .04) 0%, transparent 60%), var(--nd)
    }

    .hero-gl {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(5, 150, 105, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 150, 105, .04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 70% at 65% 35%, black, transparent)
    }

    .hero {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      padding: 80px 48px;
      max-width: var(--container-max);
      margin: 0 auto
    }

    .hero-l {
      animation: fU .7s ease both
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--em-d);
      border: 1px solid rgba(5, 150, 105, .3);
      color: var(--em2);
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 50px;
      margin-bottom: 28px
    }

    .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--em2);
      animation: pulse 2s infinite
    }

    h1.h1 {
      font-family: var(--fh);
      font-size: clamp(2.3rem, 4vw, 3.7rem);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -0.045em;
      color: var(--wh);
      margin-bottom: 24px
    }

    h1.h1 .ge {
      background: linear-gradient(135deg, var(--em2) 0%, var(--em) 50%, #a7f3d0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    h1.h1 .gc {
      background: linear-gradient(135deg, var(--cy) 0%, var(--gn) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .hero-lead {
      font-size: 1.08rem;
      color: var(--g100);
      font-weight: 500;
      line-height: 1.7;
      margin-bottom: 36px;
      max-width: 520px
    }

    .hero-lead strong {
      color: var(--g2);
      font-weight: 500
    }

    .hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 52px
    }

    .hero-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .kpi-b {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 12px;
      padding: 18px 20px;
      transition: border-color .2s
    }

    .kpi-b:hover {
      border-color: rgba(5, 150, 105, .22)
    }

    .kpi-v {
      font-family: var(--fh);
      font-size: 2rem;
      font-weight: 800;
      color: var(--em2);
      letter-spacing: -.04em;
      line-height: 1
    }

    .kpi-v.a {
      color: var(--am)
    }

    .kpi-v.b {
      color: var(--bl)
    }

    .kpi-v.c {
      color: var(--cy)
    }

    .kpi-l {
      font-size: .76rem;
      color: var(--g100);
      font-weight: 500;
      margin-top: 6px;
      line-height: 1.4
    }

    .hero-r {
      animation: fI .9s .5s ease both
    }

    .pj-card {
      background: var(--nc);
      border: 1px solid rgba(5, 150, 105, .22);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 80px rgba(5, 150, 105, .08)
    }

    .pj-card::before {
      content: '';
      display: block;
      height: 2px;
      background: linear-gradient(90deg, var(--em), var(--em2), var(--cy), transparent)
    }

    .pj-header {
      padding: 18px 24px;
      background: rgba(5, 150, 105, .07);
      border-bottom: 1px solid rgba(5, 150, 105, .12);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .pj-title {
      font-family: var(--fh);
      font-size: .82rem;
      font-weight: 700;
      color: var(--wh);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .pj-badge {
      font-size: .68rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 50px;
      background: rgba(5, 150, 105, .12);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .22)
    }

    .pj-body {
      padding: 20px 24px
    }

    .pj-phases {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 14px
    }

    .pj-phase {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      transition: all .2s
    }

    .pj-phase:hover {
      border-color: rgba(5, 150, 105, .22);
      background: rgba(5, 150, 105, .04)
    }

    .pj-p-ico {
      font-size: 1rem;
      flex-shrink: 0
    }

    .pj-p-info {
      flex: 1
    }

    .pj-p-name {
      font-size: .8rem;
      font-weight: 600;
      color: var(--wh)
    }

    .pj-p-content {
      font-size: .66rem;
      color: var(--g6);
      margin-top: 1px
    }

    .pj-p-badge {
      font-size: .62rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 50px;
      flex-shrink: 0;
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .2)
    }

    .pj-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px
    }

    .pjs {
      padding: 10px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 9px;
      text-align: center
    }

    .pjs-val {
      font-family: var(--fh);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--em2);
      line-height: 1
    }

    .pjs-lbl {
      font-size: .62rem;
      color: var(--g6);
      margin-top: 3px
    }

    .pj-footer {
      padding: 12px 24px;
      background: rgba(0, 0, 0, .12);
      border-top: 1px solid rgba(255, 255, 255, .04);
      font-size: .74rem;
      color: var(--g6);
      display: flex;
      justify-content: space-between
    }

    .market {
      padding: 80px 0;
      background: var(--nv);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .ms-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 48px
    }

    .ms {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: var(--r);
      padding: 28px 22px;
      text-align: center;
      transition: all .25s var(--ease);
      position: relative;
      overflow: hidden
    }

    .ms::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px
    }

    .ms:nth-child(1)::before {
      background: linear-gradient(90deg, var(--em), transparent)
    }

    .ms:nth-child(2)::before {
      background: linear-gradient(90deg, var(--am), transparent)
    }

    .ms:nth-child(3)::before {
      background: linear-gradient(90deg, var(--bl), transparent)
    }

    .ms:nth-child(4)::before {
      background: linear-gradient(90deg, var(--vt), transparent)
    }

    .ms:hover {
      transform: translateY(-4px)
    }

    .ms:nth-child(1):hover {
      border-color: rgba(5, 150, 105, .22)
    }

    .ms:nth-child(2):hover {
      border-color: rgba(245, 158, 11, .22)
    }

    .ms:nth-child(3):hover {
      border-color: rgba(77, 168, 255, .22)
    }

    .ms:nth-child(4):hover {
      border-color: rgba(153, 102, 255, .22)
    }

    .ms-val {
      font-family: var(--fh);
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1;
      margin-bottom: 8px
    }

    .ms:nth-child(1) .ms-val {
      color: var(--em2)
    }

    .ms:nth-child(2) .ms-val {
      color: var(--am)
    }

    .ms:nth-child(3) .ms-val {
      color: var(--bl)
    }

    .ms:nth-child(4) .ms-val {
      color: var(--vt)
    }

    .ms-lbl {
      font-size: .88rem;
      font-weight: 600;
      color: var(--wh);
      margin-bottom: 5px
    }

    .ms-desc {
      font-size: .76rem;
      color: var(--g6);
      line-height: 1.5
    }

    .swot {
      padding: 120px 0
    }

    .swot-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start
    }

    .pos-matrix {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px
    }

    .pm {
      padding: 18px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .05);
      transition: all .2s
    }

    .pm:hover {
      transform: translateX(5px)
    }

    .pm.bad {
      background: rgba(255, 51, 102, .04);
      border-color: rgba(255, 51, 102, .1)
    }

    .pm.mid {
      background: rgba(245, 158, 11, .04);
      border-color: rgba(245, 158, 11, .1)
    }

    .pm.best {
      background: rgba(5, 150, 105, .06);
      border-color: rgba(5, 150, 105, .18)
    }

    .pm-label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 5px
    }

    .pm.bad .pm-label {
      color: var(--mg)
    }

    .pm.mid .pm-label {
      color: var(--am)
    }

    .pm.best .pm-label {
      color: var(--em2)
    }

    .pm-title {
      font-size: .9rem;
      font-weight: 700;
      color: var(--wh);
      margin-bottom: 5px
    }

    .pm-text {
      font-size: .79rem;
      color: var(--g4);
      line-height: 1.55
    }

    .pm-tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 8px
    }

    .pm-tag {
      font-size: .62rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 50px
    }

    .pm.bad .pm-tag {
      background: rgba(255, 51, 102, .08);
      color: var(--mg);
      border: 1px solid rgba(255, 51, 102, .18)
    }

    .pm.mid .pm-tag {
      background: rgba(245, 158, 11, .08);
      color: var(--am);
      border: 1px solid rgba(245, 158, 11, .18)
    }

    .pm.best .pm-tag {
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .2)
    }

    .swot-card {
      background: var(--nc);
      border: 1px solid rgba(5, 150, 105, .18);
      border-radius: 20px;
      padding: 40px;
      position: relative;
      overflow: hidden
    }

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

    .swot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .sg {
      border-radius: 12px;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .05)
    }

    .sg.s {
      background: rgba(5, 150, 105, .06);
      border-color: rgba(5, 150, 105, .14)
    }

    .sg.w {
      background: rgba(245, 158, 11, .05);
      border-color: rgba(245, 158, 11, .12)
    }

    .sg.o {
      background: rgba(77, 168, 255, .05);
      border-color: rgba(77, 168, 255, .12)
    }

    .sg.t {
      background: rgba(255, 51, 102, .04);
      border-color: rgba(255, 51, 102, .1)
    }

    .sg-head {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .sg.s .sg-head {
      color: var(--em2)
    }

    .sg.w .sg-head {
      color: var(--am)
    }

    .sg.o .sg-head {
      color: var(--bl)
    }

    .sg.t .sg-head {
      color: var(--mg)
    }

    .sg-items {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .sg-item {
      font-size: .78rem;
      color: var(--g4);
      display: flex;
      align-items: flex-start;
      gap: 6px
    }

    .sg.s .sg-item::before {
      content: '✓';
      color: var(--em2);
      font-weight: 700;
      flex-shrink: 0
    }

    .sg.w .sg-item::before {
      content: '△';
      color: var(--am);
      font-weight: 700;
      flex-shrink: 0
    }

    .sg.o .sg-item::before {
      content: '→';
      color: var(--bl);
      font-weight: 700;
      flex-shrink: 0
    }

    .sg.t .sg-item::before {
      content: '!';
      color: var(--mg);
      font-weight: 700;
      flex-shrink: 0
    }

    .journey {
      padding: 120px 0;
      background: var(--nv);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .jou-phases {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 64px;
      position: relative
    }

    .jou-phases::before {
      content: '';
      position: absolute;
      top: 32px;
      left: 8%;
      right: 8%;
      height: 1px;
      background: linear-gradient(90deg, var(--em), var(--em2), var(--cy), var(--gn), var(--am));
      opacity: .15
    }

    .jp {
      padding: 0 10px;
      text-align: center
    }

    .jp-ico {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      position: relative;
      z-index: 1;
      transition: transform .25s var(--ease)
    }

    .jp:hover .jp-ico {
      transform: scale(1.1) translateY(-4px)
    }

    .jp:nth-child(1) .jp-ico {
      background: rgba(5, 150, 105, .12);
      border: 1px solid rgba(5, 150, 105, .25)
    }

    .jp:nth-child(2) .jp-ico {
      background: rgba(52, 211, 153, .1);
      border: 1px solid rgba(52, 211, 153, .22)
    }

    .jp:nth-child(3) .jp-ico {
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .22)
    }

    .jp:nth-child(4) .jp-ico {
      background: rgba(77, 168, 255, .1);
      border: 1px solid rgba(77, 168, 255, .22)
    }

    .jp:nth-child(5) .jp-ico {
      background: rgba(153, 102, 255, .1);
      border: 1px solid rgba(153, 102, 255, .22)
    }

    .jp-title {
      font-family: var(--fh);
      font-size: .92rem;
      font-weight: 700;
      color: var(--wh);
      margin-bottom: 8px;
      line-height: 1.2
    }

    .jp-desc {
      font-size: .76rem;
      color: var(--g4);
      line-height: 1.6;
      margin-bottom: 10px
    }

    .jp-content {
      font-size: .7rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 50px;
      display: inline-block
    }

    .jp:nth-child(1) .jp-content {
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .18)
    }

    .jp:nth-child(2) .jp-content {
      background: rgba(52, 211, 153, .08);
      color: var(--gn);
      border: 1px solid rgba(52, 211, 153, .18)
    }

    .jp:nth-child(3) .jp-content {
      background: rgba(245, 158, 11, .08);
      color: var(--am);
      border: 1px solid rgba(245, 158, 11, .18)
    }

    .jp:nth-child(4) .jp-content {
      background: rgba(77, 168, 255, .08);
      color: var(--bl);
      border: 1px solid rgba(77, 168, 255, .18)
    }

    .jp:nth-child(5) .jp-content {
      background: rgba(153, 102, 255, .08);
      color: var(--vt);
      border: 1px solid rgba(153, 102, 255, .18)
    }

    .formate {
      padding: 120px 0
    }

    .fmt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 64px
    }

    .fmt {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: var(--r);
      padding: 36px 32px;
      transition: all .25s var(--ease);
      position: relative;
      overflow: hidden
    }

    .fmt::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px
    }

    .fmt.f1::before {
      background: linear-gradient(90deg, var(--em), var(--em2), transparent)
    }

    .fmt.f2::before {
      background: linear-gradient(90deg, var(--bl), var(--cy), transparent)
    }

    .fmt.f3::before {
      background: linear-gradient(90deg, var(--am), #fbbf24, transparent)
    }

    .fmt.f4::before {
      background: linear-gradient(90deg, var(--vt), var(--sp), transparent)
    }

    .fmt.f5::before {
      background: linear-gradient(90deg, var(--or), var(--am), transparent)
    }

    .fmt.f6::before {
      background: linear-gradient(90deg, var(--cy), var(--em2), transparent)
    }

    .fmt::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .25s
    }

    .fmt.f1::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(5, 150, 105, .08), transparent)
    }

    .fmt.f2::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(77, 168, 255, .08), transparent)
    }

    .fmt.f3::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 158, 11, .08), transparent)
    }

    .fmt.f4::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(153, 102, 255, .08), transparent)
    }

    .fmt.f5::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(234, 88, 12, .08), transparent)
    }

    .fmt.f6::after {
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 229, 199, .08), transparent)
    }

    .fmt:hover {
      transform: translateY(-5px)
    }

    .fmt:hover::after {
      opacity: 1
    }

    .fmt.f1:hover {
      border-color: rgba(5, 150, 105, .22)
    }

    .fmt.f2:hover {
      border-color: rgba(77, 168, 255, .22)
    }

    .fmt.f3:hover {
      border-color: rgba(245, 158, 11, .22)
    }

    .fmt.f4:hover {
      border-color: rgba(153, 102, 255, .22)
    }

    .fmt.f5:hover {
      border-color: rgba(234, 88, 12, .22)
    }

    .fmt.f6:hover {
      border-color: rgba(0, 229, 199, .22)
    }

    .fmt-ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      margin-bottom: 20px;
      position: relative;
      z-index: 1
    }

    .fmt.f1 .fmt-ico {
      background: var(--em-d);
      border: 1px solid rgba(5, 150, 105, .22)
    }

    .fmt.f2 .fmt-ico {
      background: rgba(77, 168, 255, .1);
      border: 1px solid rgba(77, 168, 255, .22)
    }

    .fmt.f3 .fmt-ico {
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .22)
    }

    .fmt.f4 .fmt-ico {
      background: rgba(153, 102, 255, .1);
      border: 1px solid rgba(153, 102, 255, .22)
    }

    .fmt.f5 .fmt-ico {
      background: rgba(234, 88, 12, .1);
      border: 1px solid rgba(234, 88, 12, .22)
    }

    .fmt.f6 .fmt-ico {
      background: var(--cy-d);
      border: 1px solid rgba(0, 229, 199, .22)
    }

    .fmt-title {
      font-family: var(--fh);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--wh);
      letter-spacing: -.02em;
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .fmt-text {
      font-size: .87rem;
      color: var(--g4);
      line-height: 1.65;
      position: relative;
      z-index: 1
    }

    .fmt-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 14px;
      position: relative;
      z-index: 1
    }

    .fmt-tag {
      font-size: .66rem;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 50px
    }

    .fmt.f1 .fmt-tag {
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .18)
    }

    .fmt.f2 .fmt-tag {
      background: rgba(77, 168, 255, .08);
      color: var(--bl);
      border: 1px solid rgba(77, 168, 255, .18)
    }

    .fmt.f3 .fmt-tag {
      background: rgba(245, 158, 11, .08);
      color: var(--am);
      border: 1px solid rgba(245, 158, 11, .18)
    }

    .fmt.f4 .fmt-tag {
      background: rgba(153, 102, 255, .08);
      color: var(--vt);
      border: 1px solid rgba(153, 102, 255, .18)
    }

    .fmt.f5 .fmt-tag {
      background: rgba(234, 88, 12, .08);
      color: var(--or);
      border: 1px solid rgba(234, 88, 12, .18)
    }

    .fmt.f6 .fmt-tag {
      background: var(--cy-d);
      color: var(--cy);
      border: 1px solid rgba(0, 229, 199, .18)
    }

    .fmt-hwg {
      margin-top: 12px;
      padding: 9px 12px;
      border-radius: 9px;
      font-size: .74rem;
      display: flex;
      align-items: center;
      gap: 7px;
      position: relative;
      z-index: 1;
      background: rgba(5, 150, 105, .06);
      border: 1px solid rgba(5, 150, 105, .14);
      color: var(--em2)
    }

    .hwg {
      padding: 120px 0;
      background: var(--nv);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .hwg-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .hwg-items {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px
    }

    .hi {
      display: flex;
      gap: 14px;
      padding: 18px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 12px;
      transition: all .2s
    }

    .hi:hover {
      border-color: rgba(5, 150, 105, .22);
      background: rgba(5, 150, 105, .04)
    }

    .hi-ico {
      font-size: 1.4rem;
      flex-shrink: 0;
      margin-top: 2px
    }

    .hi-title {
      font-size: .9rem;
      font-weight: 700;
      color: var(--wh);
      margin-bottom: 4px
    }

    .hi-text {
      font-size: .82rem;
      color: var(--g4);
      line-height: 1.55
    }

    .hi-tag {
      display: inline-flex;
      margin-top: 6px;
      font-size: .68rem;
      font-weight: 700;
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .2);
      padding: 2px 9px;
      border-radius: 50px
    }

    .comp-card {
      background: var(--nc);
      border: 1px solid rgba(5, 150, 105, .18);
      border-radius: 20px;
      padding: 40px;
      position: relative;
      overflow: hidden
    }

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

    .cc-title {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--em2);
      margin-bottom: 20px
    }

    .cc-list {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .cc-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 13px 14px;
      background: rgba(5, 150, 105, .05);
      border: 1px solid rgba(5, 150, 105, .14);
      border-radius: 10px;
      transition: all .2s
    }

    .cc-item:hover {
      border-color: rgba(5, 150, 105, .25)
    }

    .cc-ico {
      font-size: .9rem;
      flex-shrink: 0;
      margin-top: 2px
    }

    .cc-text {
      flex: 1;
      font-size: .83rem;
      color: var(--g3)
    }

    .cc-badge {
      font-size: .64rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 50px;
      background: var(--em-d);
      color: var(--em2);
      border: 1px solid rgba(5, 150, 105, .2);
      flex-shrink: 0
    }

    .lst {
      padding: 120px 0
    }

    .l-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 64px
    }

    .l-card {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: var(--r);
      padding: 36px 32px;
      transition: all .25s var(--ease);
      position: relative;
      overflow: hidden
    }

    .l-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(5, 150, 105, .08), transparent);
      opacity: 0;
      transition: opacity .25s
    }

    .l-card:hover {
      transform: translateY(-5px);
      border-color: rgba(5, 150, 105, .22)
    }

    .l-card:hover::after {
      opacity: 1
    }

    .l-ico {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 22px;
      background: var(--em-d);
      border: 1px solid rgba(5, 150, 105, .22);
      position: relative;
      z-index: 1
    }

    .l-title {
      font-family: var(--fh);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--wh);
      letter-spacing: -.02em;
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .l-text {
      font-size: .87rem;
      color: var(--g4);
      line-height: 1.65;
      position: relative;
      z-index: 1
    }

    .l-list {
      list-style: none;
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      position: relative;
      z-index: 1
    }

    .l-list li {
      display: flex;
      gap: 8px;
      font-size: .81rem;
      color: var(--g4)
    }

    .l-list li::before {
      content: '→';
      color: var(--em2);
      font-weight: 700;
      flex-shrink: 0
    }

    .faq {
      padding: 120px 0;
      background: var(--nv);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .faq-inner {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 80px;
      align-items: start
    }

    .fi {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 10px;
      overflow: hidden;
      transition: border-color .2s;
      margin-bottom: 2px
    }

    .fi.open {
      border-color: rgba(5, 150, 105, .24)
    }

    .fq {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      text-align: left;
      transition: background .2s
    }

    .fq:hover {
      background: rgba(255, 255, 255, .02)
    }

    .fq h3 {
      font-family: var(--fh);
      font-size: .92rem;
      font-weight: 600;
      color: var(--wh);
      letter-spacing: -.01em
    }

    .fq-btn {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--em-d);
      border: 1px solid rgba(5, 150, 105, .24);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--em2);
      font-size: 1rem;
      transition: transform .25s, background .2s
    }

    .fi.open .fq-btn {
      transform: rotate(45deg);
      background: var(--em-g)
    }

    .fa {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease
    }

    .fi.open .fa {
      max-height: 350px
    }

    .fa-in {
      padding: 0 24px 20px;
      padding-top: 16px;
      font-size: .88rem;
      color: var(--g100);
      font-weight: 500;
      line-height: 1.7;
      border-top: 1px solid rgba(255, 255, 255, .05)
    }

    .bt {
      padding: 100px 0
    }

    .bt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 56px
    }

    .bt-card {
      background: var(--nc);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: var(--r);
      padding: 32px;
      text-decoration: none;
      display: block;
      transition: all .25s var(--ease);
      position: relative;
      overflow: hidden
    }

    .bt-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(5, 150, 105, .07), transparent);
      opacity: 0;
      transition: opacity .25s
    }

    .bt-card:hover {
      border-color: rgba(5, 150, 105, .22);
      transform: translateY(-5px)
    }

    .bt-card:hover::before {
      opacity: 1
    }

    .bt-cat {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--em2);
      margin-bottom: 14px
    }

    .bt-title {
      font-family: var(--fh);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--wh);
      letter-spacing: -.02em;
      line-height: 1.3;
      margin-bottom: 10px;
      position: relative;
      z-index: 1
    }

    .bt-exc {
      font-size: .84rem;
      color: var(--g100);
      font-weight: 500;
      line-height: 1.65;
      position: relative;
      z-index: 1
    }

    .bt-arr {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--em2);
      position: relative;
      z-index: 1;
      transition: gap .2s
    }

    .bt-card:hover .bt-arr {
      gap: 10px
    }

    .cta {
      padding: 100px 0;
      background: var(--nv);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .cta-box {
      background: linear-gradient(135deg, var(--nc), rgba(5, 150, 105, .07));
      border: 1px solid rgba(5, 150, 105, .22);
      border-radius: 24px;
      padding: 72px 80px;
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .cta-box::before {
      content: '';
      position: absolute;
      top: -130px;
      left: 50%;
      transform: translateX(-50%);
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(5, 150, 105, .09), transparent 70%);
      pointer-events: none
    }

    .cta-h2 {
      font-family: var(--fh);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 800;
      color: var(--wh);
      letter-spacing: -.04em;
      line-height: 1.05;
      margin-bottom: 18px;
      position: relative;
      z-index: 1
    }

    .cta-h2 span {
      color: var(--em2)
    }

    .cta-sub {
      font-size: 1.05rem;
      color: var(--g4);
      max-width: 520px;
      margin: 0 auto 40px;
      position: relative;
      z-index: 1;
      line-height: 1.7
    }

    .cta-btns {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1
    }

    .cta-note {
      margin-top: 18px;
      font-size: .78rem;
      color: var(--g100);
      font-weight: 500
    }

    footer {
      background: var(--nd);
      border-top: 1px solid rgba(255, 255, 255, .04);
      padding: 60px 0 36px
    }

    .f-row {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 48px;
      flex-wrap: wrap;
      margin-bottom: 48px
    }

    .f-brand {
      font-family: var(--fh);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--wh)
    }

    .f-brand em {
      color: var(--cy);
      font-style: normal
    }

    .f-addr {
      font-size: .82rem;
      color: var(--g6);
      line-height: 1.9;
      margin-top: 10px
    }

    .fnav {
      display: flex;
      gap: 48px;
      flex-wrap: wrap
    }

    .fn-lbl {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--g6);
      margin-bottom: 14px
    }

    .fn-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .fn-links a {
      font-size: .84rem;
      color: var(--g4);
      text-decoration: none;
      transition: color .2s
    }

    .fn-links a:hover {
      color: var(--wh)
    }

    .f-btm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .04);
      font-size: .78rem;
      color: var(--g6)
    }

    .f-btm a {
      color: var(--g6);
      text-decoration: none
    }

    .f-btm a:hover {
      color: var(--wh)
    }

    @media(max-width: var(--container-max)) {

      .hero,
      .swot-inner,
      .hwg-inner,
      .faq-inner {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .hero-r {
        display: none
      }

      .fmt-grid,
      .l-grid {
        grid-template-columns: 1fr 1fr
      }

      .bt-grid {
        grid-template-columns: 1fr 1fr
      }

      .jou-phases {
        grid-template-columns: 1fr 1fr;
        gap: 24px
      }

      .jou-phases::before {
        display: none
      }

      .ms-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {
      .nav {
        padding: 0 20px
      }

      .nav-links {
        display: none
      }

      .hero {
        padding: 40px 24px 60px
      }

      .C {
        padding: 0 24px
      }

      .fmt-grid,
      .l-grid,
      .bt-grid,
      .ms-grid,
      .jou-phases {
        grid-template-columns: 1fr
      }

      .cta-box {
        padding: 48px 24px
      }

      .cta-btns {
        flex-direction: column;
        align-items: center
      }

      .f-row {
        flex-direction: column
      }

      .fnav {
        flex-direction: column;
        gap: 28px
      }

      .bc {
        padding: calc(var(--nh) + 14px) 24px 0
      }
    }

    .pj-title svg.mzj-ico {
      width: 18px;
      height: 18px;
      color: var(--emerald-2);
      vertical-align: -3px;
      margin-right: 4px
    }

    .pj-p-ico svg.mzj-ico {
      width: 18px;
      height: 18px;
      color: currentColor
    }

    .pj-phase:nth-child(1) .pj-p-ico svg {
      color: var(--cyan)
    }

    .pj-phase:nth-child(2) .pj-p-ico svg {
      color: var(--emerald)
    }

    .pj-phase:nth-child(3) .pj-p-ico svg {
      color: var(--violet)
    }

    .pj-phase:nth-child(4) .pj-p-ico svg {
      color: var(--amber)
    }

    .pj-phase:nth-child(5) .pj-p-ico svg {
      color: var(--emerald-2)
    }

    .swot-big-ico svg.mzj-bico {
      width: 36px;
      height: 36px;
      display: block
    }

    .swot-big-ico {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .jp-ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(5, 150, 105, 0.04));
      border: 1px solid rgba(5, 150, 105, 0.18);
      margin-bottom: 20px;
    }

    .jp-ico svg.mzj-j-ico {
      width: 26px;
      height: 26px;
      color: var(--emerald-2)
    }

    .jp:nth-child(1) .jp-ico svg {
      color: var(--cyan)
    }

    .jp:nth-child(2) .jp-ico svg {
      color: var(--emerald)
    }

    .jp:nth-child(3) .jp-ico svg {
      color: var(--amber)
    }

    .jp:nth-child(4) .jp-ico svg {
      color: var(--violet)
    }

    .jp:nth-child(5) .jp-ico svg {
      color: var(--emerald-2)
    }

    .fmt-ico {
      width: 52px;
      height: 52px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(0, 229, 199, 0.14), rgba(0, 229, 199, 0.04));
      border: 1px solid rgba(0, 229, 199, 0.22);
      margin-bottom: 20px;
    }

    .fmt-ico svg.mzj-fmt-ico {
      width: 28px;
      height: 28px;
      color: var(--cyan)
    }

    .fmt:nth-child(2) .fmt-ico svg {
      color: var(--emerald)
    }

    .fmt:nth-child(3) .fmt-ico svg {
      color: var(--blue)
    }

    .fmt:nth-child(4) .fmt-ico svg {
      color: var(--amber)
    }

    .fmt:nth-child(5) .fmt-ico svg {
      color: var(--violet)
    }

    .fmt:nth-child(6) .fmt-ico svg {
      color: var(--emerald-2)
    }

    .fmt-hwg svg.mzj-sm-ico {
      width: 13px;
      height: 13px;
      color: currentColor;
      vertical-align: -2px;
      margin-right: 4px;
    }

    .hi-ico {
      width: 100%;
      max-width: 200px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(15, 31, 53, 0.6), rgba(19, 40, 64, 0.3));
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      margin-bottom: 20px;
      overflow: hidden;
    }

    .hi-ico svg.hwg-mood {
      width: 100%;
      height: 100%;
      display: block
    }

    .cc-ico svg.mzj-sm-ico {
      width: 14px;
      height: 14px;
      color: var(--emerald-2);
      vertical-align: -2px;
      margin-right: 4px;
    }

    .l-ico-wrap {
      display: block;
      width: 100%;
      height: 120px;
      margin-bottom: 20px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
      border: 1px solid rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }

    .l-ico-wrap svg.l-mood {
      width: 100%;
      height: 100%;
      display: block;
      preserveAspectRatio: xMidYMid meet;
    }

    @media (max-width:768px) {

      .l-ico-wrap,
      .hi-ico {
        height: 100px
      }

      .fmt-ico,
      .jp-ico {
        width: 44px;
        height: 44px
      }

      .fmt-ico svg,
      .jp-ico svg {
        width: 22px;
        height: 22px
      }
    }

    .mzj-page p,
    .mzj-page li {
      color: var(--g100);
    }

    .mzj-page p {
      font-weight: 500;
    }

    .mzj-page .ws-title,
    .mzj-page .kp-title,
    .mzj-page .fq,
    .mzj-page .ri-title,
    .mzj-page .pr-title,
    .mzj-page .lc-title,
    .mzj-page .sg-title {
      color: var(--white);
    }