@charset "UTF-8";

/* Premium glass surfaces — taste-skill: static glass only, no photos inside cards */

:root {
  --ds-surface-glass: rgba(255, 255, 255, 0.9);
  --ds-surface-glass-strong: rgba(255, 255, 255, 0.96);
  --ds-surface-blur: 18px;
  --ds-surface-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(30, 64, 175, 0.05);
  --ds-surface-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 16px 40px rgba(30, 64, 175, 0.08);
}

.ds-surface,
.page-home .ds-card,
.page-home .ds-news-card,
.page-home .ds-feature-card,
.help-card,
.product-card,
.teacher-card,
.sdk-card,
.blog-card,
.feature-card,
.contact-card,
.join-card,
.investor-card,
.company-intro,
.service-card,
.warranty-card,
.store-card,
.reg-box-body,
.glass-card,
.learn-more-card,
.page-site .ds-feature-card,
.support-content .feedback-card,
.purchase-guide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ds-surface-glass) !important;
  backdrop-filter: blur(var(--ds-surface-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--ds-surface-blur)) saturate(1.15);
  border: 1px solid rgba(226, 234, 248, 0.95) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-surface-shadow);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

/* Static glass fill — no interior photography */
.ds-surface::before,
.page-home .ds-card::before,
.page-home .ds-news-card::before,
.page-home .ds-feature-card::before,
.help-card::before,
.product-card::before,
.teacher-card::before,
.sdk-card::before,
.blog-card::before,
.feature-card::before,
.contact-card::before,
.join-card::before,
.service-card::before,
.warranty-card::before,
.store-card::before,
.glass-card::before,
.learn-more-card::before,
.page-site .ds-feature-card::before,
.support-content .feedback-card::before,
.purchase-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.88) 42%, rgba(241, 246, 255, 0.78) 100%);
}

/* Subtle grid — static, low contrast */
.ds-surface::after,
.page-home .ds-card::after,
.page-home .ds-news-card::after,
.page-home .ds-feature-card::after,
.help-card::after,
.product-card::after,
.teacher-card::after,
.sdk-card::after,
.blog-card::after,
.feature-card::after,
.contact-card::after,
.join-card::after,
.service-card::after,
.warranty-card::after,
.store-card::after,
.glass-card::after,
.learn-more-card::after,
.page-site .ds-feature-card::after,
.support-content .feedback-card::after,
.purchase-guide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(30, 64, 175, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 175, 0.028) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 82% at 50% 38%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 82% at 50% 38%, #000 10%, transparent 78%);
}

/* Hover — border + shadow only, no accent lines (taste-skill) */
.ds-surface > *,
.page-home .ds-card > *,
.page-home .ds-news-card > *,
.page-home .ds-feature-card > *,
.help-card > *,
.product-card > *,
.teacher-card > *,
.sdk-card > *,
.blog-card > *,
.learn-more-card > *,
.store-card > *,
.feature-card > *,
.contact-card > *,
.join-card > *,
.service-card > *,
.warranty-card > *,
.page-site .ds-feature-card > *,
.support-content .feedback-card > *,
.purchase-guide > * {
  position: relative;
  z-index: 1;
}

.ds-surface:hover,
.page-home .ds-card:hover,
.page-home .ds-news-card:hover,
.page-home .ds-feature-card:hover,
.help-card:hover,
.product-card:hover,
.teacher-card:hover,
.sdk-card:hover,
.blog-card:hover,
.feature-card:hover,
.contact-card:hover,
.join-card:hover,
.service-card:hover,
.warranty-card:hover,
.learn-more-card:hover,
.page-site .ds-feature-card:hover,
.support-content .feedback-card:hover,
.purchase-guide:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 10px 28px rgba(30, 64, 175, 0.07);
}

.page-home .ds-card-img {
  position: relative;
  z-index: 1;
  background: var(--ds-canvas-soft);
}

.page-home .ds-card-body {
  background: transparent;
}

.ds-feature-icon,
.page-home .ds-feature-icon,
.product-card .card-icon,
.feature-card .feature-icon,
.help-card .card-header i,
.teacher-card .teacher-avatar,
.warranty-card .card-icon,
.service-card h3 i,
.store-icon,
.learn-more-card > i,
.page-site .ds-feature-icon {
  background: var(--ds-surface-glass-strong) !important;
  color: var(--ds-primary) !important;
  border: 1px solid rgba(226, 234, 248, 0.98) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(30, 64, 175, 0.04) !important;
}

.capability-item,
.feature-tags span,
.feature-tag,
.feature-mini,
.stats-badge,
.app-item {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 234, 248, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.page-home .ds-feature-card .btn-outline-primary,
.help-card .more-link {
  background: rgba(255, 255, 255, 0.88);
}

.product-card .card-btn--soon {
  background: rgba(241, 246, 255, 0.92) !important;
  color: var(--ds-muted) !important;
  border-color: var(--ds-hairline) !important;
}

.product-card .card-btn:not(.card-btn--soon):hover {
  background: var(--ds-primary-active) !important;
  border-color: var(--ds-primary-active) !important;
  box-shadow: none;
}

@media (max-width: 767px) {
  :root {
    --ds-surface-blur: 12px;
  }

  .ds-surface:hover,
  .page-home .ds-card:hover,
  .page-home .ds-news-card:hover,
  .page-home .ds-feature-card:hover,
  .help-card:hover,
  .product-card:hover,
  .page-site .ds-feature-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ds-surface,
  .page-home .ds-card,
  .page-home .ds-news-card,
  .page-home .ds-feature-card,
  .help-card,
  .product-card,
  .feature-card,
  .service-card,
  .page-site .ds-feature-card,
  .purchase-guide {
    background: var(--ds-surface-card) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.stats-badge::before,
.app-item::before {
  animation: none;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
}