@layer components{.architecture-section{--arch-ease:cubic-bezier(.4, 0, .2, 1);--arch-glass:color-mix(in srgb, var(--c-bg) 75%, transparent);width:min(100%,75rem);margin-inline:auto;position:relative}.architecture-section__panel{background:linear-gradient(145deg, color-mix(in srgb, var(--c-bg) 82%, transparent), color-mix(in srgb, var(--c-bg) 45%, transparent));border:1px solid color-mix(in srgb, var(--c-text) 12%, transparent);box-shadow:0 24px 60px -20px color-mix(in srgb, var(--c-primary) 15%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-text) 8%, transparent);border-radius:clamp(1.5rem,3vw,2rem);margin-top:clamp(2rem,5vw,3rem);padding:clamp(.75rem,2vw,1.25rem);overflow:hidden}.architecture-section__bento-grid{contain:layout paint;isolation:isolate;grid-template-rows:repeat(2,minmax(12rem,auto));grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:clamp(.75rem,1.5vw,1.25rem);display:grid}.architecture-section__card-wrapper{cursor:pointer;min-width:0;min-height:0;transition:transform .45s var(--arch-ease), opacity .35s var(--arch-ease), filter .35s var(--arch-ease);will-change:transform, opacity, filter;transform:translate(0,0)}.architecture-section__bento-grid>.architecture-section__card-wrapper:first-child{grid-area:1/1/3}.architecture-section__bento-grid>.architecture-section__card-wrapper:nth-child(2){grid-area:1/2/2/4}.architecture-section__bento-grid>.architecture-section__card-wrapper:nth-child(3){grid-area:2/2/3}.architecture-section__bento-grid>.architecture-section__card-wrapper:nth-child(4){grid-area:2/3/3}.architecture-section__bento-grid>.architecture-section__card-wrapper:nth-child(5){grid-area:1/4/3}.architecture-section__card-wrapper:nth-child(2){opacity:1;filter:none;z-index:10;transform:translateY(-4px)scale(1.015)}.architecture-section__card-wrapper:not(:nth-child(2)){opacity:.6;filter:grayscale(35%)contrast(.9);transform:translate(0,0)scale(.99)}.architecture-section__card{border-color:color-mix(in srgb, var(--c-text) 8%, transparent);background:var(--arch-glass);height:100%;min-height:100%;transition:border-color .35s var(--arch-ease);flex-direction:column;display:flex}.architecture-section__card .ui-card__heavy-light-wrapper{pointer-events:none;z-index:10;position:absolute;inset:0!important}.architecture-section__card-content{flex-direction:column;justify-content:space-between;gap:1.25rem;height:100%;display:flex}.architecture-section__card-wrapper:nth-child(2) .architecture-section__card{border-color:color-mix(in srgb, var(--c-primary) 45%, transparent)}.architecture-section__icon-wrap{border:1px solid color-mix(in srgb, var(--c-text) 15%, transparent);background:color-mix(in srgb, var(--c-text) 4%, transparent);width:2.75rem;height:2.75rem;color:var(--c-text);transition:transform .35s var(--arch-ease), box-shadow .35s var(--arch-ease), background .35s var(--arch-ease), color .35s var(--arch-ease), border-color .35s var(--arch-ease);will-change:transform, box-shadow, background;border-radius:.75rem;justify-content:center;align-items:center;display:inline-flex}.architecture-section__card-wrapper:nth-child(2) .architecture-section__icon-wrap{background:linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 22%, transparent), color-mix(in srgb, var(--c-primary) 6%, transparent));border-color:color-mix(in srgb, var(--c-primary) 35%, transparent);color:var(--c-primary);box-shadow:0 12px 24px -10px color-mix(in srgb, var(--c-primary) 55%, transparent);transform:scale(1.05)}.architecture-section__card-title{color:var(--c-text);letter-spacing:-.015em;font-size:1.05rem;font-weight:700}.architecture-section__card-desc{color:color-mix(in srgb, var(--c-text) 65%, transparent);margin-top:.35rem;font-size:.875rem;line-height:1.5}.architecture-section__card-wrapper:hover{z-index:20;opacity:1!important;filter:none!important;transform:translateY(-3px)scale(1.01)!important}.architecture-section__bento-grid:hover .architecture-section__card-wrapper:not(:hover){opacity:.45;filter:grayscale(85%)contrast(.7);transform:translate(0,0)scale(.97)}@media (max-width:1024px){.architecture-section__bento-grid{grid-template-rows:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.architecture-section__card-wrapper:nth-child(n){grid-area:auto!important}}@media (max-width:640px){.architecture-section__bento-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.architecture-section__card-wrapper,.architecture-section__icon-wrap,.architecture-section__card{will-change:auto;transition:none!important;transform:none!important}}}