/* ============================================
   Mossen - Assets & Decorative Graphics
   SVG Badges, Industry Backgrounds, Decorative Elements
   ============================================ */

/* ===== Certification Badge Styles ===== */
.cert-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-badge svg {
  max-width: 100%;
  max-height: 100%;
}

/* ===== Industry Scene Backgrounds (CSS Gradient + Pattern) ===== */
.industry-bg-finance {
  background:
    linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(15, 37, 64, 0.9) 100%),
    radial-gradient(circle at 20% 30%, rgba(201, 169, 98, 0.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201, 169, 98, 0.1), transparent 40%);
  position: relative;
}

.industry-bg-finance::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 169, 98, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 98, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.industry-bg-finance::after {
  content: '🏛️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

.industry-bg-retail {
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.85) 0%, rgba(30, 58, 95, 0.9) 100%),
    radial-gradient(circle at 70% 20%, rgba(201, 169, 98, 0.15), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(201, 169, 98, 0.1), transparent 40%);
  position: relative;
}

.industry-bg-retail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(201, 169, 98, 0.03) 20px,
      rgba(201, 169, 98, 0.03) 40px
    );
}

.industry-bg-retail::after {
  content: '🛍️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

.industry-bg-education {
  background:
    linear-gradient(135deg, rgba(15, 37, 64, 0.85) 0%, rgba(26, 26, 46, 0.9) 100%),
    radial-gradient(circle at 50% 20%, rgba(201, 169, 98, 0.12), transparent 50%),
    radial-gradient(circle at 20% 60%, rgba(201, 169, 98, 0.08), transparent 40%);
  position: relative;
}

.industry-bg-education::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(201, 169, 98, 0.06) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(201, 169, 98, 0.04) 2px, transparent 2px);
  background-size: 60px 60px;
}

.industry-bg-education::after {
  content: '🎓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

.industry-bg-saas {
  background:
    linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(45, 90, 135, 0.9) 100%),
    radial-gradient(circle at 30% 50%, rgba(201, 169, 98, 0.12), transparent 50%);
  position: relative;
}

.industry-bg-saas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 169, 98, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 98, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.industry-bg-saas::after {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

.industry-bg-travel {
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.85) 0%, rgba(30, 58, 95, 0.9) 100%),
    radial-gradient(circle at 80% 30%, rgba(201, 169, 98, 0.15), transparent 50%);
  position: relative;
}

.industry-bg-travel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(201, 169, 98, 0.03) 30px,
      rgba(201, 169, 98, 0.03) 60px
    );
}

.industry-bg-travel::after {
  content: '✈️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

.industry-bg-gaming {
  background:
    linear-gradient(135deg, rgba(15, 37, 64, 0.9) 0%, rgba(26, 26, 46, 0.95) 100%),
    radial-gradient(circle at 50% 50%, rgba(201, 169, 98, 0.1), transparent 60%);
  position: relative;
}

.industry-bg-gaming::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(201, 169, 98, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.industry-bg-gaming::after {
  content: '🎮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  opacity: 0.1;
}

/* ===== Hero Decorative Graphics ===== */
.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-pattern-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 98, 0.1);
}

.hero-pattern-circle-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
}

.hero-pattern-circle-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -50px;
}

.hero-pattern-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 169, 98, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 98, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ===== Page Decorations ===== */
.section-decoration {
  position: absolute;
  pointer-events: none;
  opacity: 0.4;
}

.deco-top-left {
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  opacity: 0.3;
}

.deco-bottom-right {
  bottom: 40px;
  right: 40px;
  width: 100px;
  height: 100px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  opacity: 0.3;
}

/* ===== Brand Story Decorations ===== */
.story-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-emblem {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-gold);
  position: relative;
}

.story-emblem::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dashed var(--border-gold);
}

.story-emblem-year {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.story-emblem-text {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 8px;
}

.story-emblem-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== Stats Card Decorations ===== */
.stat-card {
  position: relative;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-gradient);
  border-radius: 2px 2px 0 0;
}

/* ===== Service Card Icons ===== */
.service-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}

.service-icon-wrapper::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(201, 169, 98, 0.1), transparent 70%);
}

.service-icon {
  font-size: 28px;
  position: relative;
  z-index: 1;
}

/* ===== Team Avatars ===== */
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  margin: 0 auto var(--space-sm);
  position: relative;
  border: 3px solid var(--gold-50);
}

.team-card {
  text-align: center;
}

.team-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.team-role {
  font-size: 13px;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 8px;
}

.team-bio {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===== Pricing Decorations ===== */
.pricing-popular-ribbon {
  position: absolute;
  top: 20px;
  right: -35px;
  background: var(--gold-gradient);
  color: var(--primary-900);
  padding: 6px 40px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(201, 169, 98, 0.3);
}

/* ===== Value Proposition Cards ===== */
.value-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gold-gradient);
  border-radius: 0 0 3px 3px;
}

.value-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.value-icon {
  font-size: 40px;
  margin-bottom: var(--space-sm);
}

.value-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.value-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ===== Sidebar Cards ===== */
.sidebar-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.sidebar-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-card-icon {
  font-size: 18px;
}

.sidebar-list {
  list-style: none;
}

.sidebar-list li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.sidebar-list li:last-child {
  border-bottom: none;
}

.sidebar-list li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Contact Info Cards ===== */
.contact-info-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.contact-info-item:hover {
  background: var(--gold-50);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.contact-info-content h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.contact-info-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Map Placeholder ===== */
.map-placeholder {
  width: 100%;
  height: 300px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 95, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 95, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.map-icon {
  font-size: 48px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.map-text {
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

/* ===== Brand Showcase Card (for Hero) ===== */
.brand-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  max-width: 460px;
  margin: 0 auto;
}

.brand-showcase-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 80%;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  z-index: 2;
}

.brand-showcase-logo {
  width: 48px;
  height: 48px;
  background: var(--gold-gradient);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--primary-900);
  margin-bottom: var(--space-sm);
}

.brand-showcase-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.brand-showcase-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.brand-showcase-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.brand-chart-bar {
  flex: 1;
  background: linear-gradient(to top, var(--primary), var(--primary-light));
  border-radius: 4px 4px 0 0;
  opacity: 0.7;
}

.brand-chart-bar.active {
  background: var(--gold-gradient);
  opacity: 1;
}

.brand-showcase-float {
  position: absolute;
  background: white;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  z-index: 3;
  min-width: 140px;
}

.brand-float-1 {
  top: 5%;
  left: 0;
  animation: float-card 5s ease-in-out infinite;
}

.brand-float-2 {
  bottom: 10%;
  right: 0;
  animation: float-card 5s ease-in-out infinite 1.5s;
}

.brand-float-3 {
  top: 45%;
  right: -5%;
  animation: float-card 5s ease-in-out infinite 3s;
}

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

.brand-float-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.brand-float-value {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.brand-float-value.green {
  color: #10b981;
}

/* ===== Scene Background Images (AI Generated) ===== */
.hero-bg {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=London%20financial%20district%20skyline%20at%20sunset%2C%20glass%20skyscrapers%2C%20golden%20hour%20light%2C%20luxury%20premium%20atmosphere%2C%20professional%20photography%2C%208K%20ultra%20detailed%2C%20cinematic%20lighting%2C%20dark%20blue%20sky%20with%20golden%20clouds%2C%20suitable%20for%20website%20hero%20background%20with%20text%20overlay%2C%20subtle%20vignette%20effect&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-finance {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20banking%20hall%20interior%2C%20marble%20columns%2C%20golden%20chandelier%20lighting%2C%20business%20professionals%20in%20suits%2C%20luxury%20financial%20institution%2C%20high%20ceiling%2C%20professional%20photography%2C%208K%20realistic%2C%20warm%20ambient%20light%2C%20suitable%20for%20website%20background%20with%20semi-transparent%20overlay%20for%20text%20readability&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-ecommerce {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20e-commerce%20online%20shopping%20scene%2C%20smartphone%20with%20mobile%20payment%2C%20delivery%20packages%2C%20credit%20card%2C%20digital%20technology%20aesthetic%2C%20clean%20minimalist%2C%20professional%20product%20photography%2C%208K%20high%20resolution%2C%20soft%20blue%20and%20gold%20tones%2C%20website%20background%20friendly%20with%20subtle%20dark%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-saas {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20SaaS%20dashboard%20on%20computer%20screen%2C%20data%20analytics%20charts%2C%20subscription%20software%2C%20tech%20office%20environment%2C%20multiple%20monitors%2C%20business%20analytics%2C%20professional%20photography%2C%208K%20ultra%20realistic%2C%20blue%20and%20gold%20color%20scheme%2C%20suitable%20for%20web%20background%20with%20dark%20semi-transparent%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-education {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=prestigious%20university%20campus%2C%20historic%20stone%20buildings%2C%20students%20walking%2C%20academic%20atmosphere%2C%20classic%20British%20architecture%2C%20sunny%20day%2C%20green%20lawns%2C%20professional%20landscape%20photography%2C%208K%20high%20detail%2C%20warm%20golden%20afternoon%20light%2C%20suitable%20for%20website%20banner%20with%20text%20overlay%20area&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-travel {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20airport%20terminal%2C%20airplane%20on%20runway%2C%20passport%20and%20travel%20documents%2C%20global%20travel%20concept%2C%20bright%20spacious%20airport%20interior%2C%20large%20windows%2C%20professional%20photography%2C%208K%20realistic%2C%20blue%20sky%20with%20clouds%2C%20luxury%20travel%20atmosphere%2C%20website%20background%20with%20subtle%20overlay%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-healthcare {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20hospital%20interior%2C%20healthcare%20technology%2C%20medical%20professionals%20in%20white%20coats%2C%20clean%20bright%20clinical%20environment%2C%20digital%20health%20screens%2C%20professional%20medical%20photography%2C%208K%20high%20resolution%2C%20soft%20blue%20and%20white%20lighting%2C%20trustworthy%20atmosphere%2C%20suitable%20for%20web%20background%20with%20semi-transparent%20dark%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-retail {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=premium%20retail%20store%20interior%2C%20POS%20payment%20terminal%2C%20cashier%20counter%2C%20luxury%20shopping%20experience%2C%20elegant%20merchandise%20displays%2C%20warm%20golden%20lighting%2C%20professional%20retail%20photography%2C%208K%20ultra%20realistic%2C%20high-end%20boutique%20atmosphere%2C%20website%20section%20background%20with%20subtle%20dark%20vignette%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-about {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=historic%20London%20classical%20architecture%2C%20British%20financial%20landmark%20building%2C%20grand%20stone%20facade%2C%20columns%20and%20ornate%20details%2C%20prestigious%20institution%2C%20golden%20hour%20sunlight%2C%20professional%20architectural%20photography%2C%208K%20high%20detail%2C%20dignified%20and%20trustworthy%20atmosphere%2C%20suitable%20for%20about%20us%20page%20background%20with%20text%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-contact {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20office%20space%20with%20glass%20walls%2C%20floor-to-ceiling%20windows%2C%20natural%20daylight%2C%20contemporary%20workspace%2C%20business%20meeting%20area%2C%20city%20skyline%20view%2C%20professional%20interior%20design%20photography%2C%208K%20ultra%20realistic%2C%20clean%20minimalist%20aesthetic%2C%20warm%20and%20inviting%20atmosphere%2C%20contact%20page%20background%20with%20subtle%20dark%20overlay%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Team Member Avatars (AI Generated) ===== */
.team-avatar-1 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20portrait%20of%20a%20confident%20middle-aged%20British%20businessman%2C%20wearing%20navy%20blue%20suit%20and%20gold%20tie%2C%20short%20neat%20hair%2C%20friendly%20trustworthy%20smile%2C%20studio%20lighting%2C%20plain%20dark%20blue%20background%2C%20corporate%20executive%2C%208K%20ultra%20realistic%2C%20high%20detail%20skin%20texture%2C%20professional%20business%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-2 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20portrait%20of%20a%20successful%20British%20businesswoman%2C%20wearing%20charcoal%20blazer%20and%20white%20blouse%2C%20shoulder%20length%20brown%20hair%2C%20confident%20warm%20expression%2C%20studio%20portrait%20lighting%2C%20solid%20navy%20background%2C%20senior%20manager%2C%208K%20photorealistic%2C%20high%20detail%2C%20corporate%20professional%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-3 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20a%20young%20adult%20male%20software%20engineer%2C%20wearing%20smart%20casual%20shirt%2C%20glasses%2C%20friendly%20approachable%20smile%2C%20short%20dark%20hair%2C%20modern%20tech%20professional%2C%20studio%20lighting%2C%20soft%20blue%20gradient%20background%2C%208K%20ultra%20realistic%2C%20high%20detail%2C%20tech%20industry%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-4 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20portrait%20of%20a%20female%20financial%20analyst%2C%20wearing%20elegant%20navy%20blazer%2C%20long%20wavy%20blonde%20hair%2C%20intelligent%20confident%20look%2C%20studio%20business%20portrait%2C%20warm%20golden%20side%20lighting%2C%20dark%20grey%20background%2C%20investment%20banking%20professional%2C%208K%20photorealistic%2C%20high%20skin%20detail&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-5 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20a%20senior%20male%20financial%20advisor%2C%20grey%20hair%2C%20wearing%20classic%20black%20suit%20with%20patterned%20tie%2C%20wise%20trustworthy%20expression%2C%20gentle%20smile%2C%20studio%20portrait%20lighting%2C%20deep%20blue%20background%2C%20wealth%20management%20professional%2C%208K%20ultra%20realistic%2C%20high%20detail%2C%20experienced%20business%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-6 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20portrait%20of%20a%20young%20female%20marketing%20manager%2C%20wearing%20cream%20colored%20blazer%2C%20short%20bob%20hairstyle%2C%20bright%20cheerful%20smile%2C%20creative%20professional%2C%20soft%20studio%20lighting%2C%20light%20grey%20background%2C%20modern%20business%20woman%2C%208K%20photorealistic%2C%20high%20detail%2C%20friendly%20corporate%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-7 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20a%20male%20compliance%20officer%2C%20south%20asian%20British%20descent%2C%20wearing%20dark%20grey%20suit%2C%20serious%20but%20approachable%20expression%2C%20neat%20short%20hair%2C%20glasses%2C%20studio%20business%20portrait%2C%20professional%20lighting%2C%20navy%20blue%20background%2C%20regulatory%20professional%2C%208K%20ultra%20realistic%2C%20high%20detail&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.team-avatar-8 {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20portrait%20of%20a%20female%20customer%20success%20director%2C%20african%20British%20descent%2C%20wearing%20elegant%20emerald%20green%20blazer%2C%20braided%20hair%2C%20warm%20genuine%20smile%2C%20studio%20portrait%20lighting%2C%20rich%20dark%20blue%20background%2C%20senior%20leadership%20professional%2C%208K%20photorealistic%2C%20high%20skin%20detail%2C%20diverse%20corporate%20portrait&image_size=square_hd');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

/* ===== Scene Background Images - Payment Scenes (AI Generated) ===== */
.scene-pos-payment {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=luxury%20retail%20store%20interior%2C%20customer%20paying%20with%20credit%20card%20on%20POS%20terminal%2C%20modern%20minimalist%20shop%20design%2C%20warm%20golden%20lighting%2C%20high%20end%20premium%20atmosphere%2C%20professional%20photography%2C%208K%20ultra%20realistic%2C%20deep%20blue%20and%20gold%20color%20tones%2C%20suitable%20for%20website%20background%20with%20semi-transparent%20dark%20overlay%20for%20text%20readability&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-ecommerce-checkout {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20clean%20desk%20with%20laptop%20showing%20ecommerce%20checkout%20page%2C%20credit%20card%20and%20smartphone%20beside%2C%20professional%20office%20environment%2C%20online%20payment%20concept%2C%20professional%20product%20photography%2C%208K%20high%20resolution%2C%20dark%20blue%20and%20gold%20accent%20colors%2C%20minimalist%20aesthetic%2C%20website%20background%20friendly%20with%20subtle%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-mobile-payment {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=hand%20holding%20smartphone%20using%20mobile%20payment%2C%20NFC%20contactless%20payment%2C%20digital%20wallet%2C%20modern%20city%20street%20background%2C%20urban%20financial%20technology%20scene%2C%20professional%20lifestyle%20photography%2C%208K%20ultra%20realistic%2C%20deep%20blue%20night%20scene%20with%20golden%20city%20lights%2C%20suitable%20for%20web%20background%20with%20dark%20semi-transparent%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-corporate-dashboard {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=corporate%20office%20desk%20with%20computer%20displaying%20financial%20dashboard%2C%20data%20charts%20and%20analytics%2C%20professional%20business%20person%20working%2C%20modern%20office%20with%20golden%20ambient%20lighting%2C%20executive%20workspace%2C%20professional%20photography%2C%208K%20ultra%20realistic%2C%20dark%20blue%20and%20gold%20color%20scheme%2C%20suitable%20for%20website%20background%20with%20text%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-global-payment {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=world%20map%20background%20with%20global%20payment%20network%20connections%2C%20foreign%20exchange%20currency%20symbols%20GBP%20EUR%20USD%2C%20financial%20technology%20data%20visualization%2C%20digital%20globe%20with%20connection%20lines%2C%20futuristic%20finance%20concept%2C%20professional%203D%20render%2C%208K%20high%20detail%2C%20dark%20blue%20with%20golden%20highlights%2C%20tech%20financial%20background%20with%20subtle%20overlay%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Scene Background Images - Industry Scenes (AI Generated) ===== */
.scene-financial-institution {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20luxury%20bank%20financial%20institution%20lobby%2C%20polished%20marble%20floors%2C%20golden%20decorations%20and%20chandeliers%2C%20high%20ceilings%2C%20grand%20entrance%2C%20professional%20business%20people%2C%20high%20end%20premium%20atmosphere%2C%20professional%20interior%20photography%2C%208K%20ultra%20realistic%2C%20deep%20navy%20blue%20and%20gold%20color%20palette%2C%20suitable%20for%20website%20background%20with%20semi-transparent%20dark%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-luxury-retail {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=high%20end%20luxury%20retail%20store%20interior%2C%20exquisite%20merchandise%20displays%2C%20elegant%20interior%20design%2C%20warm%20golden%20spotlight%20lighting%2C%20wealthy%20customer%20shopping%2C%20premium%20boutique%20atmosphere%2C%20professional%20retail%20photography%2C%208K%20ultra%20realistic%2C%20rich%20dark%20blue%20accents%20with%20gold%2C%20website%20section%20background%20with%20subtle%20dark%20vignette%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-saas-office {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20tech%20startup%20office%2C%20open%20plan%20workspace%2C%20multiple%20computer%20screens%20displaying%20data%20dashboards%2C%20young%20professional%20team%20collaborating%2C%20contemporary%20design%2C%20SaaS%20company%20environment%2C%20professional%20office%20photography%2C%208K%20ultra%20realistic%2C%20blue%20and%20gold%20color%20scheme%2C%20suitable%20for%20web%20background%20with%20dark%20semi-transparent%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-hotel-lobby {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=luxury%20five%20star%20hotel%20lobby%2C%20opulent%20interior%20design%2C%20guests%20checking%20in%20at%20reception%20desk%2C%20grand%20chandelier%2C%20golden%20warm%20lighting%2C%20marble%20floors%2C%20elegant%20furniture%2C%20high%20end%20hospitality%2C%20professional%20hotel%20photography%2C%208K%20ultra%20realistic%2C%20deep%20blue%20and%20gold%20luxury%20tones%2C%20website%20background%20with%20subtle%20overlay%20for%20text&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-healthcare-modern {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20private%20hospital%20clinic%20reception%20area%2C%20clean%20professional%20medical%20environment%2C%20patient%20making%20payment%20at%20front%20desk%2C%20contemporary%20healthcare%20design%2C%20bright%20and%20hygienic%20atmosphere%2C%20professional%20medical%20photography%2C%208K%20high%20resolution%2C%20soft%20blue%20with%20gold%20accents%2C%20trustworthy%20feeling%2C%20suitable%20for%20web%20background%20with%20semi-transparent%20dark%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Scene Background Images - Business Scenes (AI Generated) ===== */
.scene-business-meeting {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=corporate%20business%20meeting%20in%20modern%20conference%20room%2C%20professional%20team%20discussing%20financial%20data%2C%20large%20screen%20projection%20showing%20charts%20and%20graphs%2C%20boardroom%20setting%2C%20executives%20in%20suits%2C%20professional%20business%20photography%2C%208K%20ultra%20realistic%2C%20dark%20blue%20and%20gold%20atmosphere%2C%20suitable%20for%20website%20background%20with%20text%20overlay%20area&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-finance-analyst {
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=financial%20analyst%20working%20at%20desk%20with%20multiple%20computer%20monitors%2C%20trading%20data%20and%20stock%20charts%20on%20screens%2C%20focused%20professional%2C%20investment%20banking%20environment%2C%20dark%20office%20with%20screen%20glow%2C%20professional%20workplace%20photography%2C%208K%20ultra%20realistic%2C%20deep%20blue%20tones%20with%20golden%20data%20highlights%2C%20suitable%20for%20website%20background%20with%20subtle%20dark%20overlay&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Services Page Hero with Background ===== */
.page-hero-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
}

.page-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 37, 64, 0.92) 0%, rgba(30, 58, 95, 0.85) 50%, rgba(15, 37, 64, 0.9) 100%);
  z-index: 1;
}

.page-hero-bg .container {
  position: relative;
  z-index: 2;
}

.page-hero-bg .page-title,
.page-hero-bg .breadcrumb a,
.page-hero-bg .breadcrumb .current,
.page-hero-bg .page-subtitle {
  color: white;
}

.page-hero-bg .breadcrumb .separator {
  color: rgba(255, 255, 255, 0.5);
}

.page-hero-bg .breadcrumb a {
  opacity: 0.8;
}

.page-hero-bg .breadcrumb a:hover {
  opacity: 1;
  color: var(--gold);
}

.page-hero-bg .page-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== Feature Showcase Section (Alternating Layout) ===== */
.feature-showcase {
  padding: var(--space-2xl) 0;
}

.feature-showcase-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

.feature-showcase-item:last-child {
  margin-bottom: 0;
}

.feature-showcase-item.reverse {
  direction: rtl;
}

.feature-showcase-item.reverse > * {
  direction: ltr;
}

.feature-showcase-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: white;
  border: 1px solid var(--border);
}

.feature-showcase-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.feature-showcase-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold-gradient);
  z-index: 2;
}

.feature-showcase-content {
  padding: var(--space-lg) 0;
}

.feature-showcase-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.feature-showcase-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.feature-showcase-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.feature-showcase-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

.feature-showcase-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.feature-showcase-list li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

.feature-showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.feature-showcase-link:hover {
  color: var(--gold);
  gap: 12px;
}

/* ===== Product Hardware Section ===== */
.product-hardware-section {
  background: var(--bg-secondary);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.product-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transition: transform var(--transition-slow);
  transform-origin: left;
}

.product-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.product-card:hover::before {
  transform: scaleX(1);
}

.product-card-visual {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card-visual svg {
  max-width: 80%;
  max-height: 100%;
}

.product-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.product-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.product-card-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition-fast);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.product-card-btn:hover {
  background: var(--gold-gradient);
  color: var(--primary-900);
  border-color: transparent;
}

/* ===== Industry Scenes Section ===== */
.industry-scenes-section {
  background: var(--primary-900);
  color: white;
}

.industry-scenes-section .section-title {
  color: white;
}

.industry-scenes-section .section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.industry-scenes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.industry-scene-card {
  position: relative;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.industry-scene-card:hover {
  transform: translateY(-6px);
}

.industry-scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow);
}

.industry-scene-card:hover .industry-scene-bg {
  transform: scale(1.08);
}

.industry-scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 37, 64, 0.4) 0%, rgba(15, 37, 64, 0.85) 100%);
  z-index: 1;
}

.industry-scene-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  z-index: 2;
}

.industry-scene-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}

.industry-scene-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* ===== Dashboard Showcase Section ===== */
.dashboard-showcase {
  background: var(--bg-secondary);
}

.dashboard-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.dashboard-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: white;
}

.dashboard-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.dashboard-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold-gradient);
  z-index: 2;
}

.dashboard-content {
  padding: var(--space-lg) 0;
}

.dashboard-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.dashboard-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.dashboard-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.dashboard-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.dashboard-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.dashboard-feature-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.dashboard-feature-text p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .industry-scenes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .feature-showcase-item,
  .feature-showcase-item.reverse {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    direction: ltr;
  }
  
  .feature-showcase-item.reverse > * {
    direction: ltr;
  }
  
  .dashboard-showcase-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .dashboard-features {
    grid-template-columns: 1fr;
  }
  
  .feature-showcase-title {
    font-size: 26px;
  }
  
  .dashboard-title {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .industry-scenes-grid {
    grid-template-columns: 1fr;
  }
  
  .story-emblem {
    width: 200px;
    height: 200px;
  }

  .story-emblem-year {
    font-size: 48px;
  }
}