/* ================================================================
   CRIS LANDING — 10-DOMAIN FRAMEWORK
   Rules: no inline styles, no !important, no media queries.
          Card colour themes set --dc (colour) and --dcr (r,g,b).
          Responsive values are set per range in responsive.css
          under ".plx-domains":
     --dom-py --dom-svg --dom-icon-area --dom-deco-display
   ================================================================ */

.plx-domains {
  /* colour */

  /* shape + type */

  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}
.plx-domains::before {
  background: radial-gradient(ellipse 70% 45% at 50% 0%, var(--lime-a10), transparent 68%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Section header */
.plx-doms-hd { margin-bottom: var(--sp-64); position: relative; text-align: center; z-index: var(--z-1); }
.plx-doms-deco {
  color: var(--lime-a10);
  display: block;
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 900;
  left: 50%;
  letter-spacing: -8px;

  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  z-index: 0;
}
.plx-doms-h2 {
  color: var(--t1);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 900;
  letter-spacing: -.8px;

  margin-bottom: var(--sp-16);
  position: relative;
  z-index: var(--z-1);
}
.plx-doms-lead {
  color: var(--t4);
  font-size: var(--fs-14);

  margin: 0 auto;
  max-width: var(--size-540);
  position: relative;
  z-index: var(--z-1);
}

/* Per-card colour themes */
.plx-dc-cyan    { --dc: #00E5FF; --dcr: 0,229,255; }
.plx-dc-blue    { --dc: #4A9EFF; --dcr: 74,158,255; }
.plx-dc-lime    { --dc: #B7FF2A; --dcr: 183,255,42; }
.plx-dc-orange  { --dc: #F97316; --dcr: 249,115,22; }
.plx-dc-amber   { --dc: #FFB547; --dcr: 255,181,71; }
.plx-dc-purple  { --dc: #8B5CFF; --dcr: 139,92,255; }
.plx-dc-green   { --dc: #22C55E; --dcr: 34,197,94; }
.plx-dc-teal    { --dc: #00D4AA; --dcr: 0,212,170; }
.plx-dc-emerald { --dc: #10B981; --dcr: 16,185,129; }
.plx-dc-red     { --dc: #EF4444; --dcr: 239,68,68; }

/* Card */
.plx-dc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--br-outer);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: var(--sp-32) var(--sp-28) var(--sp-28);
  position: relative;
  transition: border-color var(--t-default) cubic-bezier(0.4,0,0.2,1), transform var(--t-default) cubic-bezier(0.4,0,0.2,1), box-shadow var(--t-default) cubic-bezier(0.4,0,0.2,1), background var(--t-default);
}
.plx-dc::before {
  background: linear-gradient(180deg, rgba(var(--dcr), .08) 0%, transparent 55%);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--t-default);
}
.plx-dc:hover::before { opacity: 1; }
.plx-dc:hover {
  border-color: rgba(var(--dcr), .42);
  box-shadow: 0 16px 56px var(--black-a50), 0 0 36px rgba(var(--dcr), .07);
  transform: translateY(-5px);
}
.plx-dc-num {
  color: var(--border-md);
  font-size: var(--fs-10);
  font-weight: 800;
  letter-spacing: .5px;
  position: absolute;
  right: var(--pos-22);
  top: var(--pos-20);
}

/* Icon */
.plx-dc-icon-area {
  align-items: center;
  display: flex;
  height: var(--size-56);
  justify-content: center;
  margin-bottom: var(--sp-20);
  position: relative;
  width: var(--size-56);
}
.plx-dc-icon-area::before {
  background: radial-gradient(circle, rgba(var(--dcr), .14), transparent 65%);
  border-radius: 50%;
  content: '';
  height: var(--size-90);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--t-default);
  width: var(--size-90);
}
.plx-dc:hover .plx-dc-icon-area::before { background: radial-gradient(circle, rgba(var(--dcr), .22), transparent 65%); }
.plx-dc-svg {
  color: var(--dc);
  display: block;
  height: var(--size-44);
  transition: filter var(--t-default), transform var(--t-default);
  width: var(--size-44);
}
.plx-dc:hover .plx-dc-svg { filter: drop-shadow(0 0 12px rgba(var(--dcr), .75)); transform: scale(1.06); }

/* Text */
.plx-dc-name { color: var(--t1); font-size: var(--fs-14); font-weight: 700; letter-spacing: -.2px; margin-bottom: var(--sp-6); position: relative; z-index: var(--z-1); }
.plx-dc-desc { color: var(--t4); flex: 1; font-size: var(--fs-12);margin-bottom: var(--sp-20); position: relative; z-index: var(--z-1); }
.plx-dc-bar { background: rgba(var(--dcr), .3); border-radius: var(--br-full); height: var(--size-3); transition: background var(--t-default), width var(--t-default) cubic-bezier(0.4,0,0.2,1); width: var(--size-36); }
.plx-dc:hover .plx-dc-bar { background: var(--dc); width: var(--size-56); }