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

:root {
  --scx-gradient-primary: linear-gradient(135deg, #ffdd59 0%, #ff6b6b 50%, #48b9fb 100%);
  --scx-gradient-secondary: linear-gradient(45deg, #1dd1a1 0%, #5f27cd 100%);
  --scx-gradient-tertiary: linear-gradient(120deg, #ff9f43 0%, #ee5253 100%);
  --scx-color-accentone: #ffdd59;
  --scx-color-accenttwo: #48dbfb;
  --scx-color-accentthree: #ff6b6b;
  --scx-color-textprimary: #1e272e;
  --scx-color-textsecondary: #485460;
  --scx-color-background: #f1f2f6;
  --scx-color-white: #ffffff;
  --scx-shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.08);
  --scx-shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.12);
  --scx-shadow-large: 0 20px 25px rgba(0, 0, 0, 0.18);
  --scx-border-radius-small: 8px;
  --scx-border-radius-medium: 16px;
  --scx-border-radius-large: 24px;
  --scx-transition-fast: 0.3s ease;
  --scx-transition-medium: 0.5s ease;
  --scx-transition-slow: 0.8s ease;
}


body {
  font-family: 'Poppins', sans-serif;
  color: var(--scx-color-textprimary);
  background: var(--scx-color-background);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Arvo', serif;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
  min-height: 4.2rem;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  font-size: 2.5rem;
  min-height: 3rem;
  color: var(--scx-color-textprimary);
}

h3 {
  font-size: 1.8rem;
  min-height: 2.2rem;
  color: var(--scx-color-textsecondary);
}

p {
  margin-bottom: 1rem;
  color: var(--scx-color-textsecondary);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--scx-transition-fast);
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.lKOtnhwMkpn {
  margin: 0 auto;
  position: relative;
}

.OQxUbjFRw {
  background: var(--scx-color-white);
  box-shadow: var(--scx-shadow-soft);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.eWahUqXUXmu {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.pAmXuN {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mtJK {
  font-size: 2rem;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.HpKOoCAK {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2rem;
}

.JKJWcQP {
  padding: 0.5rem 1rem;
  border-radius: var(--scx-border-radius-small);
  transition: var(--scx-transition-fast);
  position: relative;
  overflow: hidden;
}

.JKJWcQP::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--scx-gradient-primary);
  transition: var(--scx-transition-fast);
}

.JKJWcQP:hover::before {
  width: 100%;
}

.PIeXb {
  background: var(--scx-gradient-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--scx-border-radius-small);
  color: var(--scx-color-white);
  font-weight: 600;
}

.fOiIpdqZH {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.sVFkBcHfnGFyE {
  width: 25px;
  height: 3px;
  background: var(--scx-gradient-primary);
  border-radius: 2px;
  transition: var(--scx-transition-fast);
}

.SSPUARx {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9rem 2rem 2rem;
  overflow: hidden;
}

.ETZVk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/djn-engine/dfn-art/dfn-fon1.webp') center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
}

.NLlzQrfP {
  text-align: center;
  max-width: 800px;
}

.iUhszsCNMw {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  min-height: 3.6rem;
}

.hgowhegHnhOtN {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.AMuqtiEuRcDr {
  background: var(--scx-color-white);
  padding: 2rem;
  border-radius: var(--scx-border-radius-medium);
  box-shadow: var(--scx-shadow-soft);
  flex: 1;
  min-width: 200px;
  max-width: 250px;
  transition: var(--scx-transition-fast);
  position: relative;
  overflow: hidden;
}

.AMuqtiEuRcDr::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--scx-gradient-primary);
  opacity: 0.1;
  transition: var(--scx-transition-medium);
}

.AMuqtiEuRcDr:hover::before {
  left: 0;
}

.xsUxiVU {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.UimMMipiyrL {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 2rem;
}

.Gluyoue {
  display: inline-block;
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  transition: var(--scx-transition-fast);
  box-shadow: var(--scx-shadow-medium);
}

.Gluyoue:hover {
  transform: translateY(-3px);
  box-shadow: var(--scx-shadow-large);
}

.sSKztewJVabBB {
  padding: 4rem 2rem;
  background: var(--scx-color-white);
}

.kcGneFdyba {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.ranuuClsopxz {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.NgWVnUGeinL {
  width: 100%;
  height: 400px;
  background: var(--scx-gradient-secondary);
  border-radius: var(--scx-border-radius-large);
  position: relative;
  overflow: hidden;
}

.NgWVnUGeinL::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/djn-engine/dfn-art/dfn-about1.png') center/cover no-repeat;
  opacity: 0.8;
}

.cwaVkWs::before {
  background: url('/djn-engine/dfn-art/dfn-about2.png') center/cover no-repeat;
}

.GkoZTmCHI {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.sHDzJvRt {
  background: var(--scx-color-background);
  padding: 1rem;
  border-radius: var(--scx-border-radius-small);
  text-align: center;
  transition: var(--scx-transition-fast);
}

.sHDzJvRt:hover {
  transform: translateY(-5px);
  box-shadow: var(--scx-shadow-soft);
}

.sHDzJvRt .bi {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wgtyipBRhVn {
  text-align: center;
}

.uphbfIEm {
  display: inline-block;
  background: var(--scx-gradient-secondary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  transition: var(--scx-transition-fast);
}

.rpboGemJhZiI {
  padding: 4rem 2rem;
  background: var(--scx-color-background);
}

.rpboGemJhZiI h2 {
  text-align: center;
}

.UoqQR {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.AqfuWUPiilB {
  background: var(--scx-color-white);
  border-radius: var(--scx-border-radius-large);
  padding: 2rem;
  box-shadow: var(--scx-shadow-soft);
  flex: 1;
  min-width: 300px;
  max-width: 380px;
  transition: var(--scx-transition-fast);
  position: relative;
  overflow: hidden;
}

.AqfuWUPiilB::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--scx-gradient-primary);
}

.AqfuWUPiilB:hover {
  transform: translateY(-10px);
  box-shadow: var(--scx-shadow-large);
}

.uqghxmjL {
  background: var(--scx-gradient-tertiary);
  color: var(--scx-color-white);
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

.HnOLyVtTCX {
  width: 100%;
  max-width: 200px;
  height: 80px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.HnOLyVtTCX img {
  width: 100%;
  max-width: 180px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

.UpIeZ {
  list-style: none;
  margin-bottom: 2rem;
}

.UpIeZ li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.UpIeZ .bi {
  color: var(--scx-color-accentone);
  font-size: 1.2rem;
}

.edlRCWqfB {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.BNaIrUUHyymJ {
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.UnWYfp .bi {
  color: #ffc107;
  font-size: 1.2rem;
}

.czpOGr {
  display: block;
  text-align: center;
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  transition: var(--scx-transition-fast);
}

.czpOGr:hover {
  background: var(--scx-gradient-secondary);
}

.bhMyICgyHDwdx {
  position: relative;
  padding: 4rem 2rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.WQIMPZilsIqXl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/djn-engine/dfn-art/dfn-fon2.webp') center/cover no-repeat;
  opacity: 0.05;
  z-index: -1;
}

.uxTE {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.RZxZOQTrtd {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cnzdYoBlpi {
  background: var(--scx-color-white);
  padding: 2rem;
  border-radius: var(--scx-border-radius-large);
  box-shadow: var(--scx-shadow-soft);
  flex: 1;
  min-width: 300px;
  max-width: 350px;
  text-align: left;
}

.yBfCIrzyJX {
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1rem;
}

.JhKOWnHkHSlM {
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  position: relative;
  padding-right: 2rem;
}

.JhKOWnHkHSlM::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--scx-color-accentone);
  transition: var(--scx-transition-fast);
}

.JhKOWnHkHSlM.active::after {
  content: '-';
}

.RyIcUu {
  max-height: 0;
  overflow: hidden;
  transition: var(--scx-transition-medium);
  color: var(--scx-color-textsecondary);
}

.RyIcUu.active {
  max-height: 500px;
  padding-top: 1rem;
}

.WnvIqqsU {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 2rem;
}

.HIfMjfPqjli {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.rWRjuIHOI {
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
}

.oGLKQuez {
  background: var(--scx-gradient-secondary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
}

.PtZfRkfHhWck {
  position: relative;
  padding: 4rem 2rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gjTxhJHz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/djn-engine/dfn-art/dfn-fon3.webp') center/cover no-repeat;
  opacity: 0.1;
  z-index: -1;
}

.ecVuDdqx {
  text-align: center;
  max-width: 800px;
}

.DekLyOSu {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  min-height: 3.6rem;
}

.utTvLFWpoWnDSA {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}

.nbxiSrlhI {
  background: var(--scx-color-white);
  padding: 2rem;
  border-radius: var(--scx-border-radius-medium);
  box-shadow: var(--scx-shadow-soft);
  flex: 1;
  min-width: 200px;
  max-width: 250px;
  transition: var(--scx-transition-fast);
  position: relative;
  overflow: hidden;
}

.nbxiSrlhI::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--scx-gradient-tertiary);
}

.NlFYloEuFNS {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: var(--scx-gradient-tertiary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.YrvvBAQGbR {
  display: inline-block;
  background: var(--scx-gradient-tertiary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  transition: var(--scx-transition-fast);
  box-shadow: var(--scx-shadow-medium);
}

.YrvvBAQGbR:hover {
  transform: translateY(-3px);
  box-shadow: var(--scx-shadow-large);
}

.kcUcSLB {
  padding: 4rem 2rem;
  background: var(--scx-color-white);
}

.FpMiRzmCGJxn {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}

.KjSlHixFwd h2 {
  margin-bottom: 2rem;
}

.KjSlHixFwd a {
  color: var(--scx-color-accentone);
  font-weight: 600;
  position: relative;
}

.KjSlHixFwd a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--scx-color-accentone);
  transition: var(--scx-transition-fast);
}

.KjSlHixFwd a:hover::after {
  width: 100%;
}

.JQzxSisrtCA {
  display: inline-block;
  margin-top: 2rem;
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  transition: var(--scx-transition-fast);
}

.HgVhAmEH {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.kPDzaTSpR {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #51e1c2;
  padding: 0.5rem;
  border-radius: var(--scx-border-radius-small);
  transition: var(--scx-transition-fast);
  height: 100px;
}

.kPDzaTSpR:hover {
  transform: scale(1.05);
  box-shadow: var(--scx-shadow-soft);
}

.kPDzaTSpR img {
  width: 100%;
  height: 100%;
  max-height: 78px;
}

.uixBjDjNFfNYV {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.uixBjDjNFfNYV img {
  width: 80px;
  height: 80px;
}

.lILkcRye {
  background: var(--scx-color-textprimary);
  color: var(--scx-color-white);
  padding: 3rem 2rem 1rem;
}

.WkhRwaG {
  max-width: 1200px;
  margin: 0 auto;
}

.chDdLtNW {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #4a5568;
}

.mJvkzHxca {
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.MvWuYiSSl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  align-items: center;
}

.CaKqBSNmkXKd {
  transition: var(--scx-transition-fast);
}

.CaKqBSNmkXKd:hover {
  color: var(--scx-color-accenttwo);
}

.vhWjWK {
  background: var(--scx-gradient-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--scx-border-radius-small);
  font-weight: 600;
}

.JTdQLb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.YQoXwXcRqm {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.GBaajQMt {
  font-size: 0.9rem;
  transition: var(--scx-transition-fast);
}

.GBaajQMt:hover {
  color: var(--scx-color-accenttwo);
}

.WeNwdL {
  display: flex;
  gap: 0.5rem;
}

.WeNwdL .bi {
  font-size: 1.2rem;
  background: var(--scx-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.RUwGKaOOOp {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.7;
  color: #3961a1;
  margin-top: 2rem;
}

.lybbIulvXzkHsU {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--scx-color-textprimary);
  color: var(--scx-color-white);
  padding: 1.5rem 2rem;
  z-index: 2000;
  transform: translateY(100%);
  transition: var(--scx-transition-medium);
}

.lybbIulvXzkHsU.active {
  transform: translateY(0);
}

.RruNJGtyr {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.RruNJGtyr p {
  margin-bottom: 0;
  flex: 1;
  min-width: 280px;
  color: whitesmoke;
}

.RruNJGtyr a {
  color: var(--scx-color-accenttwo);
  font-weight: 600;
}

.NShaLoyhEgBD {
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: var(--scx-border-radius-small);
  font-weight: 600;
  cursor: pointer;
  transition: var(--scx-transition-fast);
  white-space: nowrap;
}

.NShaLoyhEgBD:hover {
  transform: translateY(-2px);
}

.JfIIDHMG {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: var(--scx-transition-medium);
}

.JfIIDHMG.active {
  opacity: 1;
  visibility: visible;
}

.KFIJMeDwF {
  background: var(--scx-color-white);
  padding: 3rem;
  border-radius: var(--scx-border-radius-large);
  text-align: center;
  max-width: 500px;
  margin: 2rem;
  box-shadow: var(--scx-shadow-large);
  transform: scale(0.9);
  transition: var(--scx-transition-medium);
}

.JfIIDHMG.active .KFIJMeDwF {
  transform: scale(1);
}

.KFIJMeDwF h3 {
  color: var(--scx-color-textprimary);
  margin-bottom: 1rem;
}

.KFIJMeDwF p {
  margin-bottom: 2rem;
  color: var(--scx-color-textsecondary);
}

.ORsHBoO {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.MIZwEVwqApUeGz {
  background: var(--scx-gradient-primary);
  color: var(--scx-color-white);
  border: none;
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  cursor: pointer;
  transition: var(--scx-transition-fast);
  min-width: 180px;
}

.MIZwEVwqApUeGz:hover {
  transform: translateY(-3px);
  box-shadow: var(--scx-shadow-medium);
}

.MDsASQWRK {
  background: transparent;
  color: var(--scx-color-textprimary);
  border: 2px solid var(--scx-color-textprimary);
  padding: 1rem 2rem;
  border-radius: var(--scx-border-radius-medium);
  font-weight: 600;
  cursor: pointer;
  transition: var(--scx-transition-fast);
  min-width: 180px;
}

.MDsASQWRK:hover {
  background: var(--scx-color-textprimary);
  color: var(--scx-color-white);
}

.zRguSBCEbg {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--scx-gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--scx-transition-fast);
  z-index: 1000;
  box-shadow: var(--scx-shadow-medium);
}

.zRguSBCEbg.active {
  opacity: 1;
  visibility: visible;
}

.zRguSBCEbg .bi {
  color: var(--scx-color-white);
  font-size: 1.5rem;
}

@media (max-width: 1024px) {
  h1 {
    font-size: 3rem;
    min-height: 3.6rem;
  }
  
  h2 {
    font-size: 2.2rem;
    min-height: 2.6rem;
  }
  
  .kcGneFdyba {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .FpMiRzmCGJxn {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .chDdLtNW {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .HpKOoCAK {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--scx-color-white);
    flex-direction: column;
    padding: 2rem;
    box-shadow: var(--scx-shadow-medium);
    text-align: center;
  }
  
  .HpKOoCAK.active {
    display: flex;
  }
  
  .fOiIpdqZH {
    display: flex;
  }
  
  .fOiIpdqZH.active .SwfEaqaLXk {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .fOiIpdqZH.active .zLsGvb {
    opacity: 0;
  }
  
  .fOiIpdqZH.active .CwSphnYJOxL {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  h1 {
    font-size: 2.5rem;
    min-height: 3rem;
  }
  
  h2 {
    font-size: 2rem;
    min-height: 2.4rem;
  }
  
  .hgowhegHnhOtN,
  .utTvLFWpoWnDSA {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .RZxZOQTrtd {
    grid-template-columns: 1fr;
  }
  
  .HgVhAmEH {
    grid-template-columns: 1fr;
  }
  
  .JTdQLb {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .YQoXwXcRqm {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
    min-height: 2.4rem;
  }
  
  h2 {
    font-size: 1.8rem;
    min-height: 2.2rem;
  }
  
  h3 {
    font-size: 1.5rem;
    min-height: 1.8rem;
  }
  
  .eWahUqXUXmu {
    padding: 1rem;
  }
  
  .SSPUARx,
  .sSKztewJVabBB,
  .rpboGemJhZiI,
  .bhMyICgyHDwdx,
  .PtZfRkfHhWck,
  .kcUcSLB {
    padding: 6rem 0.33rem;
  }
  
  .hgowhegHnhOtN,
  .utTvLFWpoWnDSA,
  .UoqQR {
    grid-template-columns: 1fr;
  }
  
  .GkoZTmCHI {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .RruNJGtyr {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .ORsHBoO {
    flex-direction: column;
  }
  
  .MIZwEVwqApUeGz,
  .MDsASQWRK {
    min-width: 100%;
  }
}

@media (max-width: 320px) {
  h1 {
    font-size: 1.8rem;
    min-height: 2.2rem;
  }
  
  h2 {
    font-size: 1.6rem;
    min-height: 2rem;
  }
  
  .GkoZTmCHI {
    grid-template-columns: 1fr;
  }
  
  .AMuqtiEuRcDr,
  .nbxiSrlhI,
  .AqfuWUPiilB,
  .cnzdYoBlpi {
    min-width: 100%;
  }
}

.trwnvefvs {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.NXFGCQvkCvF {
  background: linear-gradient(45deg, #a033ff 0%, #ff9933 50%, #3abc9e 100%);
  padding: 4rem 2rem;
  text-align: center;
  color: white;
}

.eORToAnhwjAAn {
  max-width: 800px;
  margin: 0 auto;
}

.NXFGCQvkCvF h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.ApYahhzxQX {
  font-size: 1.2rem;
  opacity: 0.9;
  line-height: 1.6;
}

.cOUNzewG {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.txQOPcwrYBJz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.MQmNQupqNCo {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.MQmNQupqNCo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  transition: width 0.3s ease;
}

.MQmNQupqNCo:hover::before {
  width: 8px;
}

.MQmNQupqNCo:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.MQmNQupqNCo .bi {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.MQmNQupqNCo h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1e272e;
  min-height: auto;
}

.MQmNQupqNCo p {
  color: #4a5568;
  line-height: 1.6;
}

.dtZB {
  background: white;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.dtZB h3 {
  color: #1e272e;
  margin-bottom: 1rem;
  min-height: auto;
}

.bEgAdGJy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s ease;
  margin-top: 1rem;
}

.bEgAdGJy:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .NXFGCQvkCvF h1 {
    font-size: 2.5rem;
  }
  
  .txQOPcwrYBJz {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .MQmNQupqNCo {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .NXFGCQvkCvF {
    padding: 3rem 1rem;
  }
  
  .cOUNzewG {
    padding: 2rem 1rem;
  }
  
  .MQmNQupqNCo {
    padding: 1.5rem;
  }

  .dtZB {
    padding: 3rem 5px;
  }

  .bEgAdGJy {
    width: 100%;
    flex-direction: column-reverse;
    gap: 8px;
  }
}

.vlbOkU {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #fffaf5 0%, #fee5d7 100%);
}

.bgmrZyPIdldLe {
  background: linear-gradient(45deg, #a033ff 0%, #3385cc 100%);
  padding: 5rem 2rem;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.bgmrZyPIdldLe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.ubcgvfLMB {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.bgmrZyPIdldLe h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.rcIeiRhqETkac {
  font-size: 1.3rem;
  opacity: 0.9;
}

.PjpeV {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.gMxZgbzoDS {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  margin-bottom: 4rem;
}

.MnjLPgFGCN {
  background: white;
  padding: 3rem;
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.MnjLPgFGCN::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(45deg, #a033ff, #3385cc);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.MnjLPgFGCN:hover::before {
  transform: scaleX(1);
}

.MnjLPgFGCN:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.MnjLPgFGCN .bi {
  font-size: 4rem;
  margin-bottom: 2rem;
  background: linear-gradient(45deg, #a033ff, #3385cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.MnjLPgFGCN h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #1e272e;
  min-height: auto;
  line-height: 1.3;
}

.MnjLPgFGCN p {
  color: #4a5568;
  line-height: 1.7;
  font-size: 1.1rem;
}

.lZUubKhJWXQ {
  background: linear-gradient(45deg, #a033ff, #3385cc);
  color: white;
  padding: 4rem;
  border-radius: 25px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.lZUubKhJWXQ h3 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  min-height: auto;
}

.fdqJAzyMonH {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: white;
  color: #a033ff;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.fdqJAzyMonH:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .bgmrZyPIdldLe h1 {
    font-size: 2.8rem;
  }
  
  .gMxZgbzoDS {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .MnjLPgFGCN {
    padding: 2.5rem;
  }
}

@media (max-width: 480px) {
  .bgmrZyPIdldLe {
    padding: 3rem 1rem;
  }
  
  .PjpeV {
    padding: 2rem 1rem;
  }
  
  .MnjLPgFGCN {
    padding: 2rem;
  }
  
  .MnjLPgFGCN .bi {
    font-size: 3rem;
  }

  .lZUubKhJWXQ {
    padding: 3rem 5px;
  }

  .fdqJAzyMonH {
    width: 100%;
    flex-direction: column-reverse;
    gap: 8px;
  }
}

.nsMSOgmSLkJg {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0fcff 0%, #c6edf6 100%);
  position: relative;
  overflow: hidden;
}

.aYlzVQIzsyF {
  background: linear-gradient(45deg, #00aacc 0%, #3961a1 100%);
  padding: 6rem 2rem;
  height: 45vh;
  text-align: center;
  color: white;
  position: relative;
}

.VayFWSyJQf {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
}

.ybFIgHRIkm {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.aYlzVQIzsyF h1 {
  font-size: 3.8rem;
  margin-bottom: 1.5rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.XFwJfYGh {
  font-size: 1.3rem;
  opacity: 0.9;
  line-height: 1.6;
}

.hQdErA {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.XjamEPB {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.rrwraQyQ {
  background: white;
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.rrwraQyQ::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00aacc, #3961a1);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.rrwraQyQ:hover::before {
  opacity: 0.05;
}

.rrwraQyQ:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: #00aacc;
}

.rrwraQyQ .bi {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(45deg, #00aacc, #3961a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rrwraQyQ h2 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  color: #1e272e;
  min-height: auto;
}

.rrwraQyQ p {
  color: #4a5568;
  line-height: 1.6;
  font-size: 1.05rem;
}

.xNRTghRAfjVpwz {
  background: white;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 2px solid #00aacc;
}

.xNRTghRAfjVpwz h3 {
  color: #1e272e;
  margin-bottom: 1rem;
  font-size: 2rem;
  min-height: auto;
}

.MvfagEItC {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(45deg, #00aacc, #3961a1);
  color: white;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.MvfagEItC:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,204,153,0.3);
}

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

.rrwraQyQ {
  animation: float 6s ease-in-out infinite;
}

.rrwraQyQ:nth-child(2) { animation-delay: 0.5s; }
.rrwraQyQ:nth-child(3) { animation-delay: 1s; }
.rrwraQyQ:nth-child(4) { animation-delay: 1.5s; }
.rrwraQyQ:nth-child(5) { animation-delay: 2s; }
.rrwraQyQ:nth-child(6) { animation-delay: 2.5s; }
.rrwraQyQ:nth-child(7) { animation-delay: 3s; }
.rrwraQyQ:nth-child(8) { animation-delay: 3.5s; }
.rrwraQyQ:nth-child(9) { animation-delay: 4s; }

@media (max-width: 768px) {
  .aYlzVQIzsyF h1 {
    font-size: 2.8rem;
  }
  
  .XjamEPB {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .rrwraQyQ {
    padding: 2.5rem;
    animation: none;
  }
  
  .rrwraQyQ:hover {
    transform: translateY(-5px);
  }
}

@media (max-width: 480px) {
  .aYlzVQIzsyF {
    padding: 4rem 1rem;
  }
  
  .hQdErA {
    padding: 3rem 1rem;
  }
  
  .rrwraQyQ {
    padding: 2rem;
  }
  
  .rrwraQyQ .bi {
    font-size: 3rem;
  }

  .xNRTghRAfjVpwz {
    padding: 3rem 5px;
  }

  .MvfagEItC {
    width: 100%;
    flex-direction: column-reverse;
    gap: 8px;
  }
}

.CILed {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
}

.KAdBDftiaCeox {
  background: linear-gradient(45deg, #4131ce 0%, #63b3ed 100%);
  padding: 5rem 2rem;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.KAdBDftiaCeox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.IMtKou {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.KAdBDftiaCeox h1 {
  font-size: 4.2rem;
  margin-bottom: 1.5rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.XtExzF {
  font-size: 1.4rem;
  opacity: 0.9;
  line-height: 1.6;
}

.bjtmOJKuUq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.yoeQSDeGPC {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  margin-bottom: 5rem;
}

.OQRZqNrzbPqZ {
  background: white;
  padding: 3rem;
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border-left: 6px solid #4131ce;
}

.OQRZqNrzbPqZ::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(49, 130, 206, 0.1), transparent);
  transition: left 0.6s ease;
}

.OQRZqNrzbPqZ:hover::before {
  left: 100%;
}

.OQRZqNrzbPqZ:hover {
  transform: translateY(-8px) rotate(1deg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.OQRZqNrzbPqZ .bi {
  font-size: 3.8rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(45deg, #4131ce, #63b3ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.OQRZqNrzbPqZ h2 {
  font-size: 1.7rem;
  margin-bottom: 1.2rem;
  color: #1e272e;
  min-height: auto;
  line-height: 1.3;
}

.OQRZqNrzbPqZ p {
  color: #4a5568;
  line-height: 1.7;
  font-size: 1.1rem;
}

.VPOaTZxv {
  background: linear-gradient(45deg, #4131ce, #63b3ed);
  color: white;
  padding: 4rem;
  border-radius: 25px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.VPOaTZxv h3 {
  color: white;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  min-height: auto;
}

.mvToan {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.DwUwbrMhPr {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  color: #4131ce;
  padding: 1.5rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  min-width: 250px;
  justify-content: center;
}

.DwUwbrMhPr:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.OQRZqNrzbPqZ {
  animation: pulse 8s ease-in-out infinite;
}

.OQRZqNrzbPqZ:nth-child(even) {
  animation-delay: 2s;
}

.OQRZqNrzbPqZ:nth-child(3n) {
  animation-delay: 4s;
}

@media (max-width: 1024px) {
  .yoeQSDeGPC {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .KAdBDftiaCeox h1 {
    font-size: 3rem;
  }
  
  .yoeQSDeGPC {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .OQRZqNrzbPqZ {
    padding: 2.5rem;
  }
  
  .mvToan {
    flex-direction: column;
    align-items: center;
  }
  
  .DwUwbrMhPr {
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .KAdBDftiaCeox {
    padding: 3rem 1rem;
  }
  
  .bjtmOJKuUq {
    padding: 3rem 1rem;
  }
  
  .OQRZqNrzbPqZ {
    padding: 2rem;
  }
  
  .OQRZqNrzbPqZ .bi {
    font-size: 3rem;
  }
}

.rOGOFo {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #fffaf5 0%, #f1d8fd 100%);
}

.uGeGuIGzc {
  background: linear-gradient(45deg, #bd7aea 0%, #7e239e 100%);
  padding: 6rem 2rem 8rem;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.SpyzcoqNkb {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  fill: #faf5ff;
}

.xWgJHsdVG {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.uGeGuIGzc h1 {
  font-size: 4.5rem;
  margin-bottom: 1rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.uGeGuIGzc p {
  font-size: 1.4rem;
  opacity: 0.9;
}

.yiVbXCVjNEn {
  max-width: 1200px;
  margin: -4rem auto 0;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.sguJMPJitVK {
  position: relative;
  padding: 4rem 0;
}

.sguJMPJitVK::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(45deg, #bd7aea, #7e239e);
  transform: translateX(-50%);
}

.wFENOYg {
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
  position: relative;
}

.wFENOYg:nth-child(odd) {
  flex-direction: row;
  text-align: right;
}

.Otcrakv {
  flex: 0 0 120px;
  background: linear-gradient(45deg, #bd7aea, #7e239e);
  color: white;
  padding: 1rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 2rem;
  position: relative;
  z-index: 1;
}

.tbmhnydefc {
  flex: 1;
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.tbmhnydefc h3 {
  color: #1e272e;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  min-height: auto;
}

.tbmhnydefc p {
  color: #4a5568;
  line-height: 1.6;
}

.kLrufRhRPK {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.xgVISQ {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.MIIJrvX {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.PHOKlqxnN {
  direction: rtl;
}

.PHOKlqxnN > * {
  direction: ltr;
}

.bIxGHRmHv {
  grid-template-columns: 1fr;
  text-align: center;
}

.NHFZZqcujtnh {
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 400px;
  background: linear-gradient(45deg, #bd7aea, #7e239e);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.NHFZZqcujtnh::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/djn-engine/dfn-art/dfn-about1.png') center/cover no-repeat;
  opacity: 0.8;
}

.ztrnklsQZ::before {
  background: url('/djn-engine/dfn-art/dfn-about3.png') center/cover no-repeat;
}

.etlidzNZ::before {
  background: url('/djn-engine/dfn-art/dfn-about2.png') center/cover no-repeat;
}

.maVosE h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #1e272e;
  min-height: auto;
}

.maVosE p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 2rem;
}

.nFxQYNITInrOd {
  list-style: none;
}

.nFxQYNITInrOd li {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  color: #4a5568;
}

.nFxQYNITInrOd .bi {
  color: #bd7aea;
}

.PlIxdYYnHSj {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.ZTLno {
  text-align: center;
  padding: 1.5rem;
  background: #f7fafc;
  border-radius: 15px;
}

.whpRuiXBSd {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #bd7aea;
  margin-bottom: 0.5rem;
}

.cuTyXWm {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.dFDMsmGjwTOPZ {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f7fafc;
  border-radius: 10px;
}

.dFDMsmGjwTOPZ .bi {
  color: #bd7aea;
  font-size: 2rem;
}

.MvLszbtgtxpVq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.OkAJQJPgE {
  text-align: center;
  padding: 2rem;
}

.OkAJQJPgE .bi {
  font-size: 3rem;
  color: #bd7aea;
  margin-bottom: 1rem;
}

.OkAJQJPgE h3 {
  color: #1e272e;
  margin-bottom: 1rem;
  min-height: auto;
}

.OkAJQJPgE p {
  color: #4a5568;
  font-size: 1rem;
}

@keyframes timelineAppear {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wFENOYg {
  animation: timelineAppear 0.8s ease-out;
}

.wFENOYg:nth-child(1) { animation-delay: 0.1s; }
.wFENOYg:nth-child(2) { animation-delay: 0.3s; }
.wFENOYg:nth-child(3) { animation-delay: 0.5s; }
.wFENOYg:nth-child(4) { animation-delay: 0.7s; }
.wFENOYg:nth-child(5) { animation-delay: 0.9s; }
.wFENOYg:nth-child(6) { animation-delay: 1.1s; }

@media (max-width: 1024px) {
  .sguJMPJitVK::before {
    left: 30px;
  }
  
  .wFENOYg {
    flex-direction: row !important;
    text-align: left !important;
  }
  
  .Otcrakv {
    flex: 0 0 100px;
    margin: 0 1rem 0 0;
  }
}

@media (max-width: 768px) {
  .uGeGuIGzc h1 {
    font-size: 3rem;
  }
  
  .MIIJrvX {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .PlIxdYYnHSj,
  .MvLszbtgtxpVq {
    grid-template-columns: 1fr;
  }
  
  .NHFZZqcujtnh {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .uGeGuIGzc {
    padding: 4rem 1rem 6rem;
  }
  
  .yiVbXCVjNEn,
  .kLrufRhRPK {
    padding: 2rem 1rem;
  }
  
  .tbmhnydefc {
    padding: 2rem;
  }

  .tbmhnydefc h3 {
    font-size: 0.9rem;
  }  
}

.UDVWZiZldoLFJ {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
}

.MHtLMueYYio {
  background: linear-gradient(45deg, #d8833d 0%, #e16817 100%);
  padding: 6rem 2rem;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.aJiRcurYHIAC {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.OoDYlAlZ {
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.JZwiOc {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.MHtLMueYYio h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.MHtLMueYYio p {
  font-size: 1.3rem;
  opacity: 0.9;
}

.btcUxNCvrFVnZ {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.vsPCoMV {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  margin-bottom: 4rem;
}

.aSPIXuzjHe {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.aSPIXuzjHe h2 {
  color: #1e272e;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  min-height: auto;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 3px solid #c4d31e;
}

.VpatwAKdahEG {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ZUXTRnzkKnmq {
  border: 2px solid #e2e8f0;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ZUXTRnzkKnmq:hover {
  border-color: #c4d31e;
  box-shadow: 0 5px 15px rgba(237, 137, 54, 0.1);
}

.FEwHfDVuJ {
  padding: 1.5rem;
  background: #f7fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: #1e272e;
  transition: background 0.3s ease;
}

.FEwHfDVuJ:hover {
  background: #edf2f7;
}

.FEwHfDVuJ .bi {
  color: #c4d31e;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.wEYGGDR {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.wEYGGDR.active {
  max-height: 500px;
  padding: 1.5rem;
}

.wEYGGDR p {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

.RkKEUztcUMxCy {
  background: linear-gradient(45deg, #c4d31e, #dd6b20);
  color: white;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.RkKEUztcUMxCy h3 {
  color: white;
  margin-bottom: 1rem;
  font-size: 2rem;
  min-height: auto;
}

.IXJUt {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: white;
  color: #c4d31e;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.IXJUt:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.ZUXTRnzkKnmq {
  animation: bounce 0.6s ease;
}

.ZUXTRnzkKnmq:nth-child(2) { animation-delay: 0.1s; }
.ZUXTRnzkKnmq:nth-child(3) { animation-delay: 0.2s; }
.ZUXTRnzkKnmq:nth-child(4) { animation-delay: 0.3s; }
.ZUXTRnzkKnmq:nth-child(5) { animation-delay: 0.4s; }
.ZUXTRnzkKnmq:nth-child(6) { animation-delay: 0.5s; }
.ZUXTRnzkKnmq:nth-child(7) { animation-delay: 0.6s; }
.ZUXTRnzkKnmq:nth-child(8) { animation-delay: 0.7s; }
.ZUXTRnzkKnmq:nth-child(9) { animation-delay: 0.8s; }
.ZUXTRnzkKnmq:nth-child(10) { animation-delay: 0.9s; }

@media (max-width: 1024px) {
  .vsPCoMV {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .MHtLMueYYio h1 {
    font-size: 3rem;
  }
  
  .aSPIXuzjHe {
    padding: 2rem;
  }
  
  .FEwHfDVuJ {
    padding: 1.2rem;
  }
}

@media (max-width: 480px) {
  .MHtLMueYYio {
    padding: 4rem 1rem;
  }
  
  .btcUxNCvrFVnZ {
    padding: 2rem 1rem;
  }
  
  .aSPIXuzjHe {
    padding: 1.5rem;
  }
  
  .FEwHfDVuJ {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .IXJUt {
    width: 100%;
    max-width: 272px;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    padding: 1.2rem;
    justify-content: center;
    align-items: center;
  }

  .IXJUt a {
    font-size: 0.7rem;
  }

  .RkKEUztcUMxCy {
    padding: 3rem 0.2rem;
  }
}

.FItWNTdsfyxHE {
  padding-top: 80px;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a202c 0%, #1e272e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.WZxVjCwe {
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 1rem;
}

.WFrzitbDbTnn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
}

.OliDIVJaKsV {
  font-size: 12rem;
  font-weight: 700;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bounce 2s ease-in-out infinite;
}

.OliDIVJaKsV:first-child {
  animation-delay: 0.1s;
}

.OliDIVJaKsV:last-child {
  animation-delay: 0.2s;
}

.rZglNCzudgoR {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 10s linear infinite;
  box-shadow: 0 0 50px rgba(51, 204, 255, 0.3);
}

.rZglNCzudgoR .bi {
  font-size: 4rem;
  color: white;
  animation: rotate 20s linear infinite reverse;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.njrKnWoT h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}

.njrKnWoT > p {
  font-size: 1.3rem;
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 3rem;
  color: whitesmoke;
}

.KiPphaZuegr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.tlqikhNiKY {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.tlqikhNiKY:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.tlqikhNiKY .bi {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tlqikhNiKY h3 {
  color: white;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  min-height: auto;
}

.tlqikhNiKY p {
  opacity: 0.8;
  line-height: 1.5;
  color: white;
}

.GvUsBpwGK {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.kiGorAyR {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(45deg, #a033ff, #3abc9e);
  color: white;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(255, 51, 102, 0.3);
}

.kiGorAyR:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255, 51, 102, 0.4);
}

.YbLxYKkXTn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.YbLxYKkXTn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.WFrzitbDbTnn {
  animation: float 6s ease-in-out infinite;
}

@media (max-width: 768px) {
  .OliDIVJaKsV {
    font-size: 8rem;
  }
  
  .rZglNCzudgoR {
    width: 100px;
    height: 100px;
  }
  
  .rZglNCzudgoR .bi {
    font-size: 3rem;
  }
  
  .njrKnWoT h1 {
    font-size: 2.5rem;
  }
  
  .KiPphaZuegr {
    grid-template-columns: 1fr;
  }
  
  .GvUsBpwGK {
    flex-direction: column;
    align-items: center;
  }

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

@media (max-width: 480px) {
  .WZxVjCwe {
    padding: 0.3rem;
  }

  .WFrzitbDbTnn {
    gap: 1rem;
  }
  
  .OliDIVJaKsV {
    font-size: 6rem;
  }
  
  .rZglNCzudgoR {
    width: 80px;
    height: 80px;
  }
  
  .rZglNCzudgoR .bi {
    font-size: 2.5rem;
  }
}