.feature-showcase { width: min(1050px,100%); margin: 54px auto 64px; }
.feature-collage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: dense; gap: 18px; }
.feature-card { --feature-tone: #ada3bd; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 290px; padding: clamp(26px,4vw,42px); overflow: hidden; border: 1px solid #ffffff20; border-radius: 24px; background: var(--feature-tone); color: #162124; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px #0003; }
.feature-card:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.feature-card-red { --feature-tone: #c39d98; }.feature-card-blue { --feature-tone: #a5b7c5; }.feature-card-purple { --feature-tone: #ada3bd; }.feature-card-green { --feature-tone: #a4b9ad; }.feature-card-gold { --feature-tone: #c5b58c; }
.feature-card-wide { grid-column: 1 / -1; min-height: 260px; }.feature-card-tall { grid-row: span 2; min-height: 540px; }
.feature-card-copy { position: relative; z-index: 2; max-width: 72%; }
.feature-card h2 { margin: 0 0 18px; color: inherit; font-family: inherit; font-size: clamp(28px,3.7vw,43px); line-height: 1.08; font-weight: 780; letter-spacing: -.035em; }
.feature-card p { margin: 0; color: #263e43; font-size: clamp(17px,2vw,21px); line-height: 1.45; }
.feature-card-wide h2 { font-size: clamp(34px,5vw,56px); }.feature-card-wide .feature-card-copy { max-width: 65%; }.feature-card-tall .feature-card-copy { max-width: 100%; }
.feature-card-action { display: inline-flex; gap: 10px; align-items: center; position: relative; z-index: 2; margin-top: 28px; font-size: 14px; font-weight: 650; }
.feature-art { position: absolute; right: 24px; top: 30px; width: 116px; height: 116px; color: #25383c; opacity: .86; }
.feature-card-wide .feature-art { width: 190px; height: 150px; top: 48px; right: 48px; }.feature-card-tall .feature-art { top: auto; bottom: 90px; right: 36px; width: 190px; height: 180px; }
.feature-art-main { position: absolute; top: 10px; left: 10px; animation: feature-float 3s ease-in-out infinite; }
.feature-art-duel .feature-art-main { animation: feature-recoil 1.8s ease-in-out infinite; }.feature-art-research .feature-art-main { animation: feature-turn 9s linear infinite; }.feature-art-connections .feature-art-main { animation: feature-link 2.8s ease-in-out infinite; }.feature-art-schedule .feature-art-main { animation: feature-clock 3.4s steps(4,end) infinite; }
.feature-card-wide .feature-art-main,.feature-card-tall .feature-art-main { width: 128px; height: 128px; }
.feature-art-echo { position: absolute; bottom: 0; right: 0; animation: feature-float 3s ease-in-out infinite .5s; opacity: .65; }
.feature-art-orbit { position: absolute; inset: 0; border: 1px dashed #223a3c55; border-radius: 50%; transform: rotate(-15deg); }.feature-art-orbit.second { inset: 14px; transform: rotate(30deg); border-radius: 22px; }
.feature-pixel { position: absolute; width: 9px; height: 9px; background: #796b91; animation: feature-pixel 2.4s ease-in-out infinite; }.feature-pixel.one { top: 0; right: 0; }.feature-pixel.two { bottom: 6px; left: 0; background: #647f96; animation-delay: .4s; }.feature-pixel.three { bottom: 0; right: 14px; background: #a57470; animation-delay: .9s; }
.feature-showcase-error { color: var(--moya-muted); }
@keyframes feature-float { 50% { transform: translateY(-8px) rotate(3deg); } }@keyframes feature-recoil { 25% { transform: translate(-8px,-5px) rotate(-9deg); } 65% { transform: translate(2px,2px) rotate(2deg); } }@keyframes feature-turn { to { transform: rotate(360deg); } }@keyframes feature-link { 50% { transform: translate(7px,-7px); } }@keyframes feature-clock { 50% { transform: rotate(7deg); } }@keyframes feature-pixel { 50% { transform: translateY(-10px); opacity: .3; } }
@media(max-width:700px) { .feature-showcase { margin: 36px auto; }.feature-collage { gap: 12px; grid-template-columns: minmax(0,1fr); }.feature-card,.feature-card-wide,.feature-card-tall { grid-column: auto; grid-row: auto; min-height: 265px; padding: 26px; border-radius: 20px; }.feature-card .feature-card-copy { max-width: 74%; }.feature-card h2 { font-size: 32px; }.feature-card p { font-size: 17px; }.feature-card .feature-art { top: auto; bottom: 28px; right: 16px; width: 95px; height: 95px; opacity: .6; }.feature-card .feature-art-main { width: 75px; height: 75px; } }

.feature-card h2, .feature-card p { overflow-wrap: anywhere; }