/* Core page refinement: contextual motion, resilient pricing, premium card system. */
.context-system {
  position: relative;
  width: 520px;
  height: 440px;
}

.context-system svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.context-system svg path {
  fill: none;
  stroke: rgba(var(--accent-rgb), .24);
  stroke-width: 1;
  stroke-dasharray: 5 8;
  animation: contextDash 10s linear infinite;
}

.context-radar {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 224px;
  height: 224px;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .14), rgba(8, 12, 14, .9) 68%);
  box-shadow: 0 0 80px rgba(var(--accent-rgb), .13);
}

.context-radar::before,
.context-radar::after {
  content: "";
  position: absolute;
  inset: -30px;
  border: 1px dashed rgba(255, 255, 255, .11);
  border-radius: 50%;
  animation: spin 19s linear infinite;
}

.context-radar::after {
  inset: 34px;
  animation-direction: reverse;
  animation-duration: 12s;
}

.context-radar i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), transparent);
  animation: radarSweep 4s linear infinite;
}

.context-radar span {
  max-width: 155px;
  color: var(--accent);
  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.context-radar strong {
  max-width: 165px;
  margin-top: 9px;
  font: 600 20px/1.05 Space Grotesk, sans-serif;
}

.context-chip {
  position: absolute;
  z-index: 3;
  width: 180px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(14, 23, 28, .84);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  animation: float 5.5s ease-in-out infinite;
}

.context-chip small {
  display: block;
  color: var(--accent);
  font-size: 8px;
  letter-spacing: .14em;
}

.context-chip b { display: block; margin-top: 5px; font-size: 12px; }
.context-chip.chip-1 { left: 0; top: 40px; }
.context-chip.chip-2 { right: 0; top: 72px; animation-delay: -1.5s; }
.context-chip.chip-3 { left: 50%; bottom: 15px; translate: -50% 0; animation-delay: -3s; }
.context-service .context-radar { border-radius: 34% 66% 54% 46% / 47% 40% 60% 53%; animation: morph 9s ease-in-out infinite; }
.context-product .context-radar { box-shadow: 0 0 0 24px rgba(var(--accent-rgb), .035), 0 0 80px rgba(var(--accent-rgb), .16); }
.context-plan .context-radar { border-radius: 24px; transform: rotate(4deg); }
.context-company .context-radar { background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(0, 48, 73, .24)); }

/* Replace source thumbnails with code-native animated context panels. */
.core-content-section:has(.motion-panel) {
  grid-template-columns: 75px minmax(0, 1fr) minmax(310px, .72fr);
}

.core-content-section:not(:has(.motion-panel)) {
  grid-template-columns: 75px minmax(0, 980px);
}

.motion-panel {
  position: sticky;
  top: 112px;
  align-self: start;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: radial-gradient(circle at 75% 15%, rgba(var(--accent-rgb), .13), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: var(--shadow);
}

.section-reverse .motion-panel { order: 2; }
.motion-head { display: flex; justify-content: space-between; padding: 24px; color: var(--accent); font-size: 9px; letter-spacing: .15em; }
.motion-chart { height: 220px; padding: 35px 38px; display: flex; align-items: end; gap: 12px; border-block: 1px solid var(--line); }
.motion-chart i { flex: 1; min-height: 20%; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, rgba(var(--accent-rgb), .18), var(--accent)); transform-origin: bottom; animation: chartRise 3.4s ease-in-out infinite alternate; }
.motion-chart i:nth-child(2) { height: 42%; animation-delay: -.5s; }
.motion-chart i:nth-child(3) { height: 70%; animation-delay: -1s; }
.motion-chart i:nth-child(4) { height: 56%; animation-delay: -1.5s; }
.motion-chart i:nth-child(5) { height: 92%; animation-delay: -2s; }
.motion-chart em { position: absolute; left: 25px; right: 25px; top: 48%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scanLine 3s ease-in-out infinite; }
.motion-caption { padding: 24px; }
.motion-caption strong { display: block; font: 600 18px Space Grotesk, sans-serif; }
.motion-caption span, .motion-plan>span, .motion-company>span, .motion-journal>span { color: var(--muted); font-size: 11px; }

.motion-product { display: grid; place-items: center; }
.product-node { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(9, 16, 20, .88); color: var(--accent); font: 700 12px Space Grotesk; box-shadow: 0 0 30px rgba(var(--accent-rgb), .1); animation: orbitPulse 4s ease-in-out infinite; }
.product-node.main-node { width: 112px; height: 112px; left: 50%; top: 48%; translate: -50% -50%; border-radius: 50%; color: #071013; background: var(--accent); font-size: 26px; }
.product-node.n1 { left: 13%; top: 18%; }
.product-node.n2 { right: 12%; top: 24%; animation-delay: -1.3s; }
.product-node.n3 { left: 19%; bottom: 13%; animation-delay: -2.6s; }
.motion-product::before,.motion-product::after { content:""; position:absolute; left:50%; top:48%; translate:-50% -50%; width:250px; height:250px; border:1px dashed rgba(var(--accent-rgb),.2); border-radius:50%; animation:spin 18s linear infinite; }
.motion-product::after { width:330px; height:330px; animation-direction:reverse; animation-duration:26s; }
.motion-product>span { position:absolute; right:22px; bottom:20px; max-width:180px; color:var(--accent); font:600 12px Space Grotesk; text-align:right; }

.motion-plan { display: grid; place-content: center; text-align: center; }
.plan-stack { position: relative; width: 170px; height: 155px; margin: auto; }
.plan-stack i { position: absolute; inset: 0; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 22px; background: rgba(var(--accent-rgb), .04); transform: rotate(-9deg); }
.plan-stack i:nth-child(2) { transform: rotate(7deg); }
.plan-stack i:nth-child(3) { transform: translateY(-9px); background: linear-gradient(145deg, rgba(var(--accent-rgb), .14), rgba(255,255,255,.02)); animation: float 5s ease-in-out infinite; }
.plan-stack strong { position:absolute; inset:0; display:grid; place-items:center; color:var(--accent); font:600 50px Space Grotesk; }
.motion-plan p,.motion-company p { max-width:260px; margin:22px auto 5px; font:600 18px Space Grotesk; }
.motion-company { display:grid; place-content:center; text-align:center; }
.company-orbit { position:relative; width:200px; height:200px; margin:auto; border:1px solid rgba(var(--accent-rgb),.25); border-radius:50%; display:grid; place-items:center; }
.company-orbit::before { content:""; position:absolute; inset:25px; border:1px dashed rgba(255,255,255,.15); border-radius:50%; animation:spin 14s linear infinite; }
.company-orbit strong { display:grid; place-items:center; width:86px; height:86px; border-radius:50%; background:var(--accent); color:#071013; font:700 25px Space Grotesk; }
.company-orbit i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); }
.company-orbit i:nth-child(1){left:9%;top:28%}.company-orbit i:nth-child(2){right:7%;top:44%}.company-orbit i:nth-child(3){left:47%;bottom:-6%}
.motion-journal { display:grid; place-content:center; padding:35px; }
.journal-lines { display:flex; align-items:center; gap:9px; height:160px; }
.journal-lines i { width:18px; height:35%; border-radius:20px; background:linear-gradient(to top,var(--orange),var(--accent)); animation:wave 1.6s ease-in-out infinite; }
.journal-lines i:nth-child(2){height:85%;animation-delay:-.25s}.journal-lines i:nth-child(3){height:55%;animation-delay:-.5s}.journal-lines i:nth-child(4){height:100%;animation-delay:-.75s}.journal-lines i:nth-child(5){height:45%;animation-delay:-1s}
.motion-journal strong { max-width:260px; margin:24px 0 5px; font:600 18px Space Grotesk; }

/* More distinctive, compact information cards. */
.info-card {
  min-height: 190px;
  padding: 24px;
  border-radius: 22px;
  background: radial-gradient(circle at 95% 0, rgba(var(--accent-rgb), .11), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}

.info-card::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--orange)); transition:width .45s ease; }
.info-card:hover::after { width:100%; }
.info-card-icon { position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; color:var(--accent); font:600 9px Space Grotesk; letter-spacing:.12em; }
.info-card-icon i { display:block; width:34px; height:34px; border:1px solid rgba(var(--accent-rgb),.35); border-radius:10px; background:radial-gradient(circle,var(--accent) 0 2px,transparent 3px); box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.1); }
.info-card h3 { font-size:20px; }
.rich-copy { align-items:stretch; }

/* Pricing system: price, features and CTA remain inside equal, resilient cards. */
.core-pricing { padding: 120px 0; border-bottom: 1px solid var(--line); }
.pricing-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:end; margin-bottom:48px; }
.pricing-heading h2 { max-width:800px; margin:10px 0 0; font:600 clamp(42px,5vw,74px)/.98 Space Grotesk,sans-serif; letter-spacing:-.05em; }
.pricing-heading>p { color:var(--muted); font-size:15px; }
.pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; }
.pricing-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:610px; overflow:hidden; padding:28px 24px 24px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); transition:transform .35s,border-color .35s,box-shadow .35s; }
.pricing-card::before { content:""; position:absolute; width:220px; height:220px; right:-130px; top:-130px; border-radius:50%; background:rgba(var(--accent-rgb),.12); filter:blur(8px); }
.pricing-card:hover { transform:translateY(-8px); border-color:rgba(var(--accent-rgb),.45); box-shadow:0 30px 70px rgba(0,0,0,.28); }
.pricing-card.is-featured { border-color:rgba(var(--accent-rgb),.42); background:linear-gradient(155deg,rgba(var(--accent-rgb),.12),rgba(255,255,255,.025)); }
.plan-badge { position:absolute; right:18px; top:18px; z-index:2; padding:6px 9px; border-radius:99px; background:var(--accent); color:#071013; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.pricing-card-top { position:relative; display:flex; align-items:center; gap:12px; color:var(--accent); font-size:10px; letter-spacing:.14em; }
.pricing-card-top i { width:42px; height:1px; background:var(--accent); }
.pricing-card h3 { position:relative; min-height:58px; margin:34px 0 8px; font:600 25px/1.05 Space Grotesk,sans-serif; text-transform:capitalize; }
.plan-price { margin:4px 0; color:var(--ink); font:600 38px Space Grotesk,sans-serif; letter-spacing:-.04em; }
.plan-note { min-height:46px; color:var(--muted); font-size:12px; }
.pricing-card ul { display:grid; gap:11px; list-style:none; margin:24px 0; padding:22px 0 0; border-top:1px solid var(--line); }
.pricing-card li { display:grid; grid-template-columns:18px 1fr; gap:8px; color:#b9c4c7; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.pricing-card li span { color:var(--accent); }
.pricing-card>a { display:flex; justify-content:space-between; margin-top:auto; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:12px; font-weight:700; transition:.25s; }
.pricing-card>a:hover { color:#071013; background:var(--accent); border-color:var(--accent); }

/* About: high-resolution client logos in equal-sized moving cards. */
.client-story { padding:120px 0; overflow:hidden; border-bottom:1px solid var(--line); }
.client-story-head { display:grid; grid-template-columns:1.1fr .7fr; gap:60px; align-items:end; margin-bottom:50px; }
.client-story-head h2 { margin:10px 0 0; font:600 clamp(44px,5.6vw,78px)/.98 Space Grotesk,sans-serif; letter-spacing:-.05em; }
.client-story-head h2 span { color:var(--accent); }
.client-story-head>p { color:var(--muted); }
.client-logo-slider { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.client-logo-track { display:flex; width:max-content; gap:16px; animation:clientMarquee 34s linear infinite; }
.client-logo-slider:hover .client-logo-track { animation-play-state:paused; }
.client-logo-card { flex:0 0 280px; height:190px; margin:0; display:grid; grid-template-rows:1fr auto; padding:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); }
.client-logo-card img { width:auto; max-width:100%; height:auto; max-height:115px; object-fit:contain; justify-self:center; align-self:center; filter:grayscale(1) brightness(1.2); transition:.35s; }
.client-logo-card:hover img { filter:none; transform:scale(1.04); }
.client-logo-card figcaption { padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

@keyframes radarSweep { to { transform:rotate(360deg); } }
@keyframes contextDash { to { stroke-dashoffset:-100; } }
@keyframes chartRise { 50% { transform:scaleY(.58); opacity:.6; } }
@keyframes scanLine { 50% { transform:translateY(55px); opacity:.35; } }
@keyframes orbitPulse { 50% { transform:translateY(-8px); box-shadow:0 0 40px rgba(var(--accent-rgb),.22); } }
@keyframes clientMarquee { to { transform:translateX(calc(-50% - 8px)); } }

@media (max-width: 1100px) {
  .context-system { width:480px; height:420px; }
  .core-content-section:has(.motion-panel), .core-content-section:not(:has(.motion-panel)) { grid-template-columns:55px 1fr; }
  .core-content-section .motion-panel { grid-column:2; position:relative; top:auto; margin-top:18px; min-height:340px; }
  .section-reverse .section-copy,.section-reverse .motion-panel,.section-reverse .section-index { order:initial; }
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pricing-card { min-height:560px; }
}

@media (max-width: 720px) {
  .context-system { width:350px; height:340px; transform:scale(.9); }
  .context-radar { width:170px; height:170px; }
  .context-chip { width:138px; padding:12px; }
  .context-chip.chip-1 { left:5px; top:20px; }
  .context-chip.chip-2 { right:5px; top:48px; }
  .context-chip.chip-3 { bottom:1px; }
  .core-content-section:has(.motion-panel), .core-content-section:not(:has(.motion-panel)) { grid-template-columns:1fr; }
  .core-content-section .motion-panel { grid-column:auto; min-height:310px; }
  .info-card { min-height:165px; }
  .info-card-icon { margin-bottom:28px; }
  .core-pricing,.client-story { padding:78px 0; }
  .pricing-heading,.client-story-head { grid-template-columns:1fr; gap:20px; }
  .pricing-heading h2,.client-story-head h2 { font-size:42px; }
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-card { min-height:0; }
  .pricing-card h3,.plan-note { min-height:0; }
  .client-logo-card { flex-basis:230px; height:170px; }
  .client-logo-card img { max-height:95px; }
}