/**
 * Live .org crystal glossy tiles / icon plates
 * Matches --crystal-* + glass cards from ecomhutsy.org
 */

:root {
  --tile-gloss-bg: linear-gradient(#fffffffc, #fffffffc);
  --tile-gloss-border: #2f4c961f;
  --tile-gloss-shadow:
    0 28px 80px #1c3a8929,
    0 8px 24px #22479c17,
    inset 0 1px 0 #fffffff5,
    inset 0 -1px 0 #5275cd1f;
  --tile-gloss-shadow-hover:
    0 36px 95px #1c3d973b,
    0 14px 34px #3250ad21,
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #4b70d62e;
  --icon-gloss-bg: linear-gradient(160deg, #ffffff 0%, #eef4ff 48%, #dce8ff 100%);
  --icon-gloss-border: #4b7bff40;
  --icon-gloss-shadow:
    0 14px 28px #18337022,
    inset 0 2px 0 #fffffff5,
    inset 0 -3px 8px #2759d51a;
}

body.crystal-site .home-tile,
body.crystal-site .svc-card,
body.crystal-site .svc-hub-card,
body.crystal-site .svc-check,
body.crystal-site .svc-spotlight,
body.crystal-site .svc-faq-item,
body.crystal-site .auto-card,
body.crystal-site .auto-panel,
body.crystal-site .auto-stat,
body.crystal-site .auto-faq-item,
body.crystal-site .auto-tab,
body.crystal-site .page-pro-panel:not(.page-pro-panel--ink),
body.crystal-site .page-pro-shift-card,
body.crystal-site .faq-item,
body.crystal-site .faq-group,
body.crystal-site .founder-pro-jobs-card,
body.crystal-site .founder-pro-pillar,
body.crystal-site .ach-stat-card,
body.crystal-site .ach-story-card,
body.crystal-site .ach-hero-badge,
body.crystal-site .prod-module-card,
body.crystal-site .prod-card,
body.crystal-site .prod-detail-feature,
body.crystal-site .careers-step-card,
body.crystal-site .careers-role-card,
body.crystal-site .careers-value-card,
body.crystal-site .careers-perk-card,
body.crystal-site .careers-hero-card,
body.crystal-site .about-corp-card,
body.crystal-site .web-svc-card,
body.crystal-site .page-pro-stat,
body.crystal-site .svc-stat-pill,
body.crystal-site .home-stat-pill,
body.crystal-site .contact-form-wrap,
body.crystal-site .home-markets__stage,
body.crystal-site .home-markets__logo,
body.crystal-site .products-premium .prod-module-card,
body.crystal-site .products-premium .prod-card,
body.crystal-site .services-premium main :is(a, div)[class*="rounded-2xl"]:not(.nav-dropdown__menu),
body.crystal-site .services-premium main :is(a, div)[class*="rounded-3xl"],
body.crystal-site details.faq-item,
body.crystal-site .faq-premium details,
body.automation-premium .auto-card,
body.automation-premium .auto-panel,
body.automation-premium .auto-stat,
body.automation-premium .auto-faq-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tile-gloss-bg) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--tile-gloss-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--tile-gloss-shadow) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

body.crystal-site .home-tile::before,
body.crystal-site .svc-card::before,
body.crystal-site .svc-hub-card::before,
body.crystal-site .auto-card::before,
body.crystal-site .prod-module-card::before,
body.crystal-site .prod-card::before,
body.crystal-site .page-pro-panel:not(.page-pro-panel--ink)::before,
body.crystal-site .svc-spotlight::before,
body.crystal-site .svc-check::before,
body.crystal-site .ach-stat-card::before,
body.crystal-site .web-svc-card::before,
body.crystal-site .founder-pro-jobs-card::before,
body.crystal-site .careers-role-card::before,
body.crystal-site .careers-value-card::before,
body.automation-premium .auto-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 55%;
  height: 45%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.95), transparent 70%);
  opacity: 0.9;
}

body.crystal-site .home-tile:hover,
body.crystal-site .svc-card:hover,
body.crystal-site .svc-hub-card:hover,
body.crystal-site .auto-card:hover,
body.crystal-site .prod-module-card:hover,
body.crystal-site .prod-card:hover,
body.crystal-site .web-svc-card:hover,
body.automation-premium .auto-card:hover {
  transform: translateY(-6px);
  border-color: #4b7bff66 !important;
  box-shadow: var(--tile-gloss-shadow-hover) !important;
}

/* Icon plates */
body.crystal-site .home-tile .material-symbols-outlined,
body.crystal-site .svc-card .material-symbols-outlined,
body.crystal-site .svc-hub-card .material-symbols-outlined,
body.crystal-site .auto-card .material-symbols-outlined,
body.crystal-site .prod-module-card .material-symbols-outlined,
body.crystal-site .web-svc-card .material-symbols-outlined,
body.crystal-site .page-pro-panel .material-symbols-outlined,
body.crystal-site .founder-pro-pillar .material-symbols-outlined,
body.crystal-site .careers-value-card .material-symbols-outlined,
body.automation-premium .auto-card .material-symbols-outlined,
body.crystal-site .home-tile__icon,
body.crystal-site .svc-card__icon,
body.crystal-site .auto-card__icon {
  background: var(--icon-gloss-bg) !important;
  border: 1px solid var(--icon-gloss-border) !important;
  box-shadow: var(--icon-gloss-shadow) !important;
  color: #095cff !important;
  border-radius: 16px !important;
}

body.crystal-site .home-tile--dark {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  color: #f5f8ff !important;
}

body.crystal-site .home-tile--dark::before {
  background: radial-gradient(ellipse at 0% 0%, rgba(71, 113, 255, 0.25), transparent 70%);
}

body.crystal-site .home-tile h3,
body.crystal-site .svc-card h3,
body.crystal-site .auto-card h3,
body.crystal-site .prod-card h3,
body.crystal-site .prod-module-card h3 {
  color: #09142c !important;
}