.materials-page{min-height:100vh}.materials-hero{background:linear-gradient(180deg,var(--color-background) 0%,color-mix(in srgb,var(--color-secondary) 30%,transparent) 100%);padding:4rem 0 3rem;text-align:center}.materials-hero h1{color:var(--color-accent);margin-bottom:1rem}.materials-intro{max-width:540px;margin:0 auto;color:var(--color-text-muted);font-size:1.0625rem;line-height:1.7}.materials-section{padding:3rem 0}.materials-section--alt{background:color-mix(in srgb,var(--color-secondary) 15%,transparent)}.section-title{color:var(--color-accent);margin-bottom:2rem;font-size:clamp(1.25rem,3vw,1.75rem);position:relative;display:inline-block}.materials-rodo-note{font-size:.875rem;color:var(--color-text-muted);line-height:1.6;margin-bottom:1.5rem}.materials-rodo-note a{color:var(--color-accent);text-decoration:underline}.section-title:after{content:"";position:absolute;bottom:-6px;left:0;width:50px;height:3px;background-color:var(--color-primary);border-radius:2px}.materials-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}.material-card{background:var(--color-white);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);box-shadow:0 1px 3px color-mix(in srgb,var(--color-accent) 4%,transparent),0 4px 12px color-mix(in srgb,var(--color-accent) 6%,transparent);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}@media(hover:hover){.material-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px color-mix(in srgb,var(--color-accent) 8%,transparent),0 12px 32px color-mix(in srgb,var(--color-accent) 12%,transparent)}}.material-card__image{width:100%;max-width:220px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px color-mix(in srgb,var(--color-accent) 8%,transparent),0 8px 24px color-mix(in srgb,var(--color-accent) 10%,transparent);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;position:relative;z-index:2}.material-card__image-badge{position:absolute;bottom:0;left:0;right:0;text-align:center;background:color-mix(in srgb,var(--color-accent) 85%,transparent);backdrop-filter:blur(4px);color:var(--color-white);font-size:.75rem;font-weight:700;padding:.375rem 0;text-transform:uppercase;letter-spacing:.08em}.material-card__image img{width:100%;height:160px;display:block;object-fit:cover;object-position:center 35%}@media(hover:hover){.material-card:hover .material-card__image{transform:scale(1.03);box-shadow:0 4px 12px color-mix(in srgb,var(--color-accent) 10%,transparent),0 12px 32px color-mix(in srgb,var(--color-accent) 14%,transparent)}}.material-card--coming-soon .material-card__image{opacity:.8}.material-card__content{flex:1;display:flex;flex-direction:column;gap:.75rem}.material-card__title{font-size:1.25rem;color:var(--color-accent);margin:0;line-height:1.3}.material-card__description{color:var(--color-text-muted);font-size:.9375rem;line-height:1.6;margin:0}.material-card__features{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.5rem}.material-card__features li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text-muted)}.material-card__features li svg{width:16px;height:16px;color:var(--color-primary);flex-shrink:0}.material-card__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}.material-card--coming-soon{border-style:dashed}.materials-cta-section{padding:2rem 0 4rem}.materials-cta{text-align:center;padding:2rem;background:color-mix(in srgb,var(--color-secondary) 30%,transparent);border-radius:16px}.materials-cta p{color:var(--color-text);margin-bottom:1rem;font-size:1.0625rem}@media(min-width:768px){.materials-hero{padding:5rem 0 4rem}.materials-intro{font-size:1.125rem}.materials-section{padding:4rem 0}.materials-grid{grid-template-columns:repeat(2,1fr);gap:2rem}.material-card{padding:2rem}}@media(min-width:1024px){.materials-hero{padding:6rem 0 5rem}.materials-section{padding:5rem 0}.materials-grid{grid-template-columns:repeat(3,1fr)}.materials-cta-section{padding:3rem 0 6rem}.materials-cta{margin-top:0}}