@property --cf-sheen-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cf-page-ribbon .cf-ribbon-stage { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.cf-page-ribbon .cf-ribbon-layer { position: absolute; inset: 7%; transform-origin: center; }
.cf-page-ribbon .cf-ribbon-layer img { position: absolute; width: 114%; max-width: none; height: 114%; left: -7%; top: -7%; object-fit: contain; user-select: none; pointer-events: none; }
.cf-page-ribbon .cf-ribbon-back { transform: translate(10.5%,-10.5%) scale(.97); opacity: .83; filter: saturate(.9) brightness(.92); z-index: 1; }
.cf-page-ribbon .cf-ribbon-front { transform: translate(-10.5%,10.5%); z-index: 2; }
.cf-page-ribbon .cf-ribbon-sheen { position: absolute; inset: -7%; opacity: 0; background: conic-gradient(from var(--cf-sheen-angle) at 50% 50%, transparent 0deg 270deg, rgba(153,248,255,.06) 288deg, rgba(224,255,251,.32) 315deg, rgba(109,224,255,.09) 338deg, transparent 360deg); -webkit-mask: url('/assets/img/homepage/clear-frameworks-ribbon.webp') center / contain no-repeat; mask: url('/assets/img/homepage/clear-frameworks-ribbon.webp') center / contain no-repeat; mix-blend-mode: screen; pointer-events: none; }
.cf-page-ribbon.is-building .cf-ribbon-back { animation: cf-ribbon-separate-back 4.8s cubic-bezier(.35,0,.18,1) both; }
.cf-page-ribbon.is-building .cf-ribbon-front { animation: cf-ribbon-separate-front 4.8s cubic-bezier(.35,0,.18,1) both; }
.cf-page-ribbon.is-building .cf-ribbon-sheen { animation: cf-ribbon-surface 10s linear 1.2s infinite; }
.cf-page-ribbon.is-building .cf-ribbon-back .cf-ribbon-sheen { animation-delay: 3.2s; }
.cf-page-ribbon.is-paused * { animation-play-state: paused !important; }
@keyframes cf-ribbon-separate-back { 0%, 14% { transform: translate(0,0) scale(1); opacity: 0; } 25% { opacity: .83; } 100% { transform: translate(10.5%,-10.5%) scale(.97); opacity: .83; } }
@keyframes cf-ribbon-separate-front { 0%, 14% { transform: translate(0,0); } 100% { transform: translate(-10.5%,10.5%); } }
@keyframes cf-ribbon-surface { from { --cf-sheen-angle: 0deg; opacity: 1; } to { --cf-sheen-angle: 360deg; opacity: 1; } }
.cf-page-ribbon { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .cf-page-ribbon *, .cf-page-ribbon.is-building * { animation: none !important; } }

/* Fit the same layered mark into each existing hero without changing its copy. */
.cf-hero-aside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-width: 0; }
.clearframe-home .cf-hero-aside > .concept-hero-owner { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 16px; width: 100%; max-width: 380px; min-height: 0; margin: 0; padding: 18px; }
.clearframe-home .cf-hero-aside > .concept-hero-owner > img { width: 72px; height: 72px; object-fit: cover; }
.clearframe-home .cf-hero-aside > .concept-hero-owner > span { padding: 0; }
.clearframe-home .cf-hero-aside > .concept-hero-owner strong { font-size: 22px; line-height: 1.2; }
.clearframe-home .cf-hero-aside > .concept-hero-owner span span { font-size: 12px; line-height: 1.5; }
.cf-brand-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.45fr); gap: 64px; align-items: center; }
.cf-brand-hero-grid > div { min-width: 0; }
.cf-faq-mark { max-width: 250px; margin: 36px auto 0; }
@media (max-width: 720px) {
 .cf-hero-aside { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 20px; width: 100%; }
 .clearframe-home .cf-hero-aside > .concept-hero-owner { grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 12px; }
 .clearframe-home .cf-hero-aside > .concept-hero-owner > img { width: 52px; height: 52px; }
 .clearframe-home .cf-hero-aside > .concept-hero-owner strong { font-size: 17px; }
 .clearframe-home .cf-hero-aside > .concept-hero-owner span span { font-size: 11px; }
 .cf-brand-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .cf-brand-hero-grid > .cf-page-ribbon { max-width: 140px; justify-self: start; margin: 0; }
 .cf-faq-mark { max-width: 128px; margin: 24px 0 0; }
}
@media (max-width: 420px) { .cf-hero-aside { grid-template-columns: 72px minmax(0,1fr); gap: 12px; } .clearframe-home .cf-hero-aside > .concept-hero-owner { grid-template-columns: minmax(0,1fr); } .clearframe-home .cf-hero-aside > .concept-hero-owner > img { width: 48px; height: 48px; } }