/* Vendor sites: components layered on top of pengcloud styles.css. --accent is set per site. */

.chip .vlogo.code {
  width: auto; min-width: 28px; padding: 0 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.c-acc { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 28%, transparent); }

/* sized in cqi so the badge stays inside the round core (34cqi) at every width */
.core-mark { display: block; width: 12cqi; height: 12cqi; padding: 2cqi; border-radius: 3.2cqi; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.core-mark.wide { width: 16cqi; height: 9cqi; padding: 1.6cqi 2.4cqi; border-radius: 2.4cqi; }
.core-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.core-inner b { margin-top: 1.6cqi; }

.intro-brand { display: inline-grid; place-items: center; height: 60px; padding: 10px 18px; margin-bottom: 22px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.intro-brand img { height: 36px; width: auto; max-width: 220px; object-fit: contain; }

/* products */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prod { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.prod::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.prod:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.prod:hover::before { transform: scaleX(1); }
.prod-code { align-self: flex-start; padding: 5px 12px; margin-bottom: 18px; border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); }
.prod h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.prod p { font-size: 14.5px; color: var(--muted); }

.main-nav > a, .nav-item > a { white-space: nowrap; }
.hero h1, h2 { text-wrap: balance; }

/* regions */
.region-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; margin: 0 auto 56px; }
.region-list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-size: 14.5px; color: #dbe7ff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(140, 180, 255, .2); transition: border-color .25s, background .25s; }
.region-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, .18); }
.region-list li:hover { border-color: rgba(94, 234, 212, .5); background: rgba(255, 255, 255, .1); }

/* faq */
.faq { background: #fff; }
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: #cddcff; box-shadow: var(--shadow); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--primary); }
.faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.faq-item p { padding: 0 26px 24px; color: var(--ink-2); font-size: 15.5px; line-height: 1.9; }

.clouds.more { background: var(--bg-soft); padding-bottom: 100px; }

@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prod-grid { grid-template-columns: 1fr; }
  .chip .vlogo.code { min-width: 22px; padding: 0 5px; font-size: 10px; }
  .faq-item summary { padding: 18px 20px; font-size: 16px; }
  .faq-item p { padding: 0 20px 20px; }
}