/* Hero: platform cards under the copy, and the module network around the logo.
   Node positions and wires come from network-layout.js (main.js). Motion runs
   only when allowed; the pause control and reduced motion stop it (styles.css),
   and loops pause while the cards are offscreen (data-idle). */

/* ── Platform cards ───────────────────────────────────────────── */
@property --pc-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.platform-cards {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  direction: ltr;
}
.platform-card {
  --pc-angle: 0deg;
  --pc-tint: #70d8ff;
  --pc-glow: #3f8cff47;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-height: 150px;
  padding: 18px 16px 16px;
  border: 1px solid transparent;
  border-radius: 18px;
  text-align: left;
  background:
    linear-gradient(160deg, #0e2446f5, #071530f7) padding-box,
    conic-gradient(from var(--pc-angle), #5f9de02e 0 60%, var(--pc-tint) 74%, #fff3d4 80%, var(--pc-tint) 86%, #5f9de02e 98%) border-box;
  box-shadow: 0 18px 40px #0006, inset 0 1px 0 #ffffff0f;
  transition: transform .35s cubic-bezier(.2, .65, .3, 1), box-shadow .35s;
}
.platform-card:nth-child(2) { --pc-tint: #e6bd72; --pc-glow: #e6bd7240; }
.platform-card:nth-child(3) { --pc-tint: #8fb8ff; --pc-glow: #5b8cff45; }
.platform-card:nth-child(4) { --pc-tint: #7ee8c7; --pc-glow: #39c79a3d; }
.platform-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 46%;
  background: linear-gradient(100deg, transparent, #ffffff12 42%, #fff1cf2b 50%, #ffffff12 58%, transparent);
  transform: translateX(-170%) skewX(-14deg);
  pointer-events: none;
}
.platform-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60px;
  left: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pc-glow), transparent 70%);
  pointer-events: none;
}
.platform-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--pc-tint);
  background: linear-gradient(145deg, #ffffff17, #ffffff05);
  border: 1px solid #ffffff1f;
  box-shadow: 0 0 24px var(--pc-glow), inset 0 1px 0 #ffffff1a;
}
.platform-icon svg { width: 24px; height: 24px; }
.platform-tag {
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--pc-tint);
  font: 700 9.5px/1 Arial, sans-serif;
  letter-spacing: 1.4px;
  opacity: .8;
}
.platform-card strong { margin-top: 4px; color: #f2f7ff; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: .2px; }
.platform-card small { color: #9fb4d3; font-size: 12.5px; line-height: 1.5; }
@media (hover: hover) {
  .platform-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px #0008, 0 0 34px var(--pc-glow), inset 0 1px 0 #ffffff14; }
}
@media (max-width: 860px) {
  .platform-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; gap: 12px; }
}
@media (max-width: 760px) {
  .platform-cards { margin-top: 24px; gap: 10px; }
  .platform-card { min-height: 132px; padding: 14px 12px 13px; gap: 7px; border-radius: 16px; }
  .platform-icon { width: 40px; height: 40px; border-radius: 12px; }
  .platform-icon svg { width: 21px; height: 21px; }
  .platform-tag { top: 13px; right: 10px; padding: 3px 6px; font-size: 8px; letter-spacing: 1px; }
  .platform-card strong { font-size: 14.5px; }
  .platform-card small { font-size: 11.5px; }
}
@media (max-width: 365px) {
  .platform-card { padding-inline: 10px; }
  .platform-tag { display: none; }
  .platform-card strong { font-size: 13.5px; }
}

/* ── Module network ───────────────────────────────────────────── */
.network .nucleus, .network .orbit { top: 50%; }
@media (min-width: 1051px) { .network { height: 520px; } }
@media (min-width: 1600px) { .network { height: 560px; } }
@media (max-width: 760px) {
  .network { margin-top: 14px; }
  .network .nucleus { width: 128px; height: 138px; border-radius: 24px; }
  .network .nucleus::after { inset: -8px; border-radius: 30px; }
  .network .nucleus img { width: 62px; height: 62px; border-radius: 15px; }
  .network .nucleus strong { margin-top: 6px; font-size: 18px; letter-spacing: 1.5px; }
  .network .nucleus strong span { margin-top: 3px; font-size: 6.5px; letter-spacing: 4.5px; }
  .network .core-status { display: none; }
  .network .nucleus-ring { inset: -14px; }
  .network .orbit-one { width: 190px; height: 190px; }
  .network .orbit-two { width: var(--ring-w, 80%); height: var(--ring-h, 84%); transform: translate(-50%, -50%); border-color: #5c9ff224; }
  .network .orbit-three { display: none; }
  .network-lines { opacity: .95; }
  .network .wire:not(.wire-active) { opacity: .55; }
  .network .wire-glow { opacity: .2; }
  .network .module-node {
    width: 84px;
    height: auto;
    min-height: 88px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding: 9px 4px 8px;
    border-radius: 18px;
    text-align: center;
  }
  .network .node-icon { width: 38px; height: 38px; border-radius: 50%; }
  .network .node-icon svg { width: 19px; height: 19px; }
  .network .node-text { text-align: center; }
  .network .node-text strong { font-size: 11.5px; line-height: 1.4; }
}
@media (max-width: 365px) {
  .network .nucleus { width: 110px; height: 124px; }
  .network .nucleus img { width: 54px; height: 54px; }
  .network .nucleus strong { font-size: 15px; }
  .network .module-node { width: 76px; }
  .network .node-text strong { font-size: 10.5px; }
}

/* ── Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .platform-card { animation: platform-rise .8s calc(.35s + var(--i, 0) * .12s) cubic-bezier(.2, .65, .3, 1) both, platform-spin 7s calc(var(--i, 0) * -1.75s) linear infinite; }
  .platform-card::before { animation: platform-sheen 6.5s calc(1.3s + var(--i, 0) * .35s) cubic-bezier(.45, .05, .35, 1) infinite; }
  .platform-icon { animation: platform-float 4.5s calc(var(--i, 0) * -.9s) ease-in-out infinite alternate; }
  .platform-cards[data-idle] *, .platform-cards[data-idle] *::before { animation-play-state: paused !important; }
}
@keyframes platform-rise { from { opacity: 0; filter: blur(6px); translate: 0 18px; scale: .97; } to { opacity: 1; filter: none; translate: none; scale: 1; } }
@keyframes platform-spin { to { --pc-angle: 360deg; } }
@keyframes platform-sheen { 0% { transform: translateX(-170%) skewX(-14deg); } 26%, 100% { transform: translateX(330%) skewX(-14deg); } }
@keyframes platform-float { from { transform: translateY(0); box-shadow: 0 0 18px var(--pc-glow), inset 0 1px 0 #ffffff1a; } to { transform: translateY(-3px); box-shadow: 0 0 30px var(--pc-glow), inset 0 1px 0 #ffffff1a; } }
@media (forced-colors: active) { .platform-card { border-color: CanvasText; } }