/* Core technology — built to the client's reference design: heading + 2x2 capability grid on
   the left, S1 with radar rings and live call-outs on the right, four headline stats below. */

.core-sec {
  --amber: #f2a65a;
  --fam-serif: "Instrument Serif", var(--intl-serif), Georgia, serif;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  padding-block: 80px;
  scroll-margin-top: 64px;
}
.core-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background-image: linear-gradient(rgba(246, 238, 228, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 238, 228, 1) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent);
}
.core-wrap { position: relative; max-width: 1400px; margin-inline: auto; padding-inline: 20px; }
.core-top { display: grid; align-items: center; gap: 48px; }

/* Heading */
.core-head { display: flex; flex-direction: column; gap: 20px; }
.core-eyebrow {
  display: flex; align-items: center; gap: 12px; color: rgba(242, 166, 90, 0.9);
  font-family: var(--f-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
}
html.lang-zh .core-eyebrow { letter-spacing: 0.22em; }
.core-eyebrow i { display: block; height: 1px; width: 32px; flex-shrink: 0; background: currentColor; }
.core-title {
  max-width: 48rem; font-family: var(--fam-serif);
  font-size: 2.1rem; line-height: 1.18; font-weight: 500; letter-spacing: 0;
  text-wrap: balance; white-space: pre-line; color: var(--cream);
}
.core-lede { max-width: 42rem; font-size: 1rem; line-height: 1.625; color: rgba(246, 239, 230, 0.7); }

/* Capability grid: 1px dividers come from the gap over a light background */
.core-feats {
  margin-top: 40px;
  display: grid; gap: 1px;
  overflow: hidden; border-radius: 24px;
  border: 1px solid rgba(246, 239, 230, 0.1);
  background: rgba(246, 239, 230, 0.1);
}
.core-feat { display: flex; gap: 16px; background: var(--navy); padding: 20px; transition: background 0.5s; min-width: 0; }
.core-feat:hover { background: #151c3d; }
.core-feat .ic {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--amber);
  background: linear-gradient(135deg, rgba(242, 165, 74, 0.25), rgba(200, 23, 78, 0.25));
  box-shadow: inset 0 0 0 1px rgba(242, 166, 90, 0.3);
  transition: transform 0.5s var(--ease-out);
}
.core-feat:hover .ic { transform: scale(1.1); }
.core-feat .ic svg { width: 20px; height: 20px; }
.core-feat .tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.core-feat h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.core-feat p { font-size: 0.875rem; line-height: 1.625; color: rgba(246, 239, 230, 0.6); }

/* Visual: S1 with radar and call-outs */
.core-vis { position: relative; margin-inline: auto; width: 100%; max-width: 520px; aspect-ratio: 10 / 11; }
.core-vis .glow { position: absolute; inset: 8%; border-radius: 50%; filter: blur(64px); background: radial-gradient(closest-side, rgba(194, 24, 91, 0.45), rgba(232, 90, 79, 0.15) 60%, transparent); }
.core-radar { position: absolute; left: 0; right: 0; bottom: 6%; height: 22%; }
.core-radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(242, 166, 90, 0.6); animation: coreRadar 4.5s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0; }
.core-radar .ring:nth-child(2) { animation-delay: 1.5s; }
.core-radar .ring:nth-child(3) { animation-delay: 3s; }
@keyframes coreRadar { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 0; } }
.core-radar .inner { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(246, 239, 230, 0.15); }
.core-radar .core-dot { position: absolute; inset: 34%; border-radius: 50%; background: rgba(242, 166, 90, 0.1); filter: blur(12px); }
.core-vis img { position: absolute; bottom: 14%; left: 50%; height: 78%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
.core-tag { position: absolute; display: flex; align-items: center; gap: 8px; }
.core-tag.rev { flex-direction: row-reverse; }
.core-tag .pill {
  border-radius: 999px; border: 1px solid rgba(246, 239, 230, 0.2);
  background: rgba(11, 16, 32, 0.6); padding: 6px 12px;
  font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(246, 239, 230, 0.85); white-space: nowrap;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.core-tag .ln { height: 1px; width: 40px; background: linear-gradient(to right, rgba(242, 166, 90, 0.8), transparent); }
.core-tag .pt { position: relative; display: flex; width: 10px; height: 10px; }
.core-tag .pt::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(242, 166, 90, 0.7); animation: corePing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
.core-tag .pt::after { content: ""; position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
@keyframes corePing { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Stats */
.core-stats { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(246, 239, 230, 0.1); }
.core-stat { padding: 32px 24px 32px 0; border-color: rgba(246, 239, 230, 0.1); min-width: 0; }
.core-stat .v {
  font-family: var(--fam-serif); font-size: 2.25rem; font-weight: 500; line-height: 1.1;
  background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.core-stat .k { margin-top: 8px; font-size: 0.875rem; letter-spacing: 0.025em; color: rgba(246, 239, 230, 0.6); }

@media (max-width: 767px) {
  .core-stat:nth-child(even) { padding-inline-start: 24px; }
  .core-stat:nth-child(odd) { border-inline-end: 1px solid rgba(246, 239, 230, 0.1); }
  .core-stat:nth-child(n + 3) { border-top: 1px solid rgba(246, 239, 230, 0.1); }
}
@media (min-width: 640px) {
  .core-title { font-size: 2.25rem; }
  .core-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .core-feat { flex-direction: column; padding: 28px; }
  .core-feat .tx { gap: 16px; }
  .core-feat h3 { font-size: 1.125rem; }
  .core-vis { aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) {
  .core-sec { padding-block: 144px; }
  .core-wrap { padding-inline: 40px; }
  .core-top { gap: 64px; }
  .core-title { font-size: 3rem; }
  .core-lede { font-size: 1.125rem; }
  .core-feats { margin-top: 48px; }
  .core-stats { margin-top: 112px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .core-stat { padding-inline-start: 32px; border-inline-end: 1px solid rgba(246, 239, 230, 0.1); }
  .core-stat:first-child { padding-inline-start: 0; }
  .core-stat:last-child { border-inline-end: 0; }
  .core-stat .v { font-size: 3rem; }
}
@media (min-width: 1024px) { .core-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .core-title { font-size: 3.5rem; } }
@media (max-width: 420px) { .core-tag .ln { width: 22px; } .core-tag .pill { letter-spacing: 0.16em; } }
html[dir="rtl"] .core-vis { direction: ltr; }  /* the S1 call-outs are drawn on the photo; keep their geometry */
