:root { --blue:#061b78; --deep:#020936; --cyan:#00caf4; --red:#ef172e; --yellow:#ffc400; --paper:#f4f7ff; --ink:#101a45; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:18px; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
.materials-header { padding:24px 20px 42px; position:relative; overflow:hidden; color:white; text-align:center; background:radial-gradient(circle at 85% 10%,#105bd2 0,transparent 32%),linear-gradient(150deg,#020b3b,#073399); }
.materials-brand { width:min(100%,410px); display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 28px; color:white; text-decoration:none; }
.materials-brand img { width:54px; height:54px; border-radius:50%; }
.materials-brand span { display:grid; justify-items:start; }
.materials-brand strong { font-size:24px; font-weight:1000; letter-spacing:-.04em; }
.materials-brand strong em { color:var(--cyan); font-style:normal; }
.materials-brand small { margin-top:5px; font-size:8px; font-weight:900; letter-spacing:.18em; }
.materials-header>p { margin:0 0 9px; color:var(--yellow); font-size:11px; font-weight:1000; letter-spacing:.2em; }
.materials-header h1 { margin:0; font:900 clamp(38px,8vw,62px)/.95 Impact,'Arial Black',sans-serif; text-transform:uppercase; }
.materials-header>span { display:block; max-width:520px; margin:15px auto 0; color:#d8e5ff; font-size:14px; line-height:1.5; }
.materials-main { width:min(1100px,calc(100% - 32px)); margin:34px auto 64px; }
.materials-section { padding:24px 0 34px; border-bottom:1px solid #d9e0f0; }
.section-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.section-heading>span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:white; background:var(--blue); font-size:10px; font-weight:1000; }
.section-heading h2 { margin:0; color:var(--blue); font-size:clamp(21px,4vw,30px); text-transform:uppercase; }
.materials-empty { padding:24px; border:1px dashed #aab7d9; border-radius:14px; color:#697493; background:white; text-align:center; font-size:14px; }
.materials-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.material-card { min-width:0; overflow:hidden; border-radius:16px; background:white; box-shadow:0 13px 34px rgba(14,32,91,.11); }
.material-card>img,.material-card>video { width:100%; aspect-ratio:4/3; display:block; object-fit:contain; object-position:center; background:#e9eef8; }
.material-card audio { width:calc(100% - 24px); display:block; margin:-20px auto 10px; position:relative; }
.audio-cover { height:150px; display:grid; place-items:center; align-content:center; gap:2px; color:white; background:radial-gradient(circle at 70% 15%,#1289e5,transparent 32%),linear-gradient(145deg,#041152,#092fa8); }
.audio-cover span { color:var(--cyan); font-size:48px; line-height:1; }
.audio-cover b { color:var(--yellow); font-size:32px; text-shadow:0 3px 0 var(--red); }
.material-copy { display:grid; gap:8px; padding:16px; }
.material-copy h3 { margin:0; color:var(--blue); font-size:18px; }
.material-copy p { margin:0; color:#68728f; font-size:13px; line-height:1.45; }
.material-copy small { color:#8a93aa; }
.material-copy a { min-height:42px; display:flex; align-items:center; justify-content:center; margin-top:4px; border-radius:9px; color:#071757; background:linear-gradient(100deg,#ffbd00,#ffda32); box-shadow:0 4px 0 #e89000; font-size:12px; font-weight:1000; text-decoration:none; }
.materials-footer { display:grid; justify-items:center; gap:13px; padding:32px 20px; color:white; background:var(--deep); text-align:center; }
.materials-footer a { color:var(--yellow); font-weight:900; text-decoration:none; }
.materials-footer small { color:#aebfe8; }
@media (max-width:800px) { .materials-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px) { .materials-header{padding:18px 15px 36px}.materials-brand{margin-bottom:22px}.materials-brand img{width:46px;height:46px}.materials-brand strong{font-size:21px}.materials-main{width:min(100% - 24px,1100px);margin-top:20px}.materials-section{padding-top:20px}.materials-grid{grid-template-columns:1fr}.material-card>img,.material-card>video{aspect-ratio:1/1}.section-heading h2{font-size:19px} }