*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#111;color:#222}
a{color:inherit}.demo{position:fixed;top:10px;right:10px;background:#D7222B;color:#fff;font:700 11px/1 sans-serif;letter-spacing:2px;padding:5px 8px;border-radius:4px;z-index:9}
.hero{background:#0d0d0d;text-align:center;padding:36px 20px 24px;position:relative;overflow:hidden}
.stripe{position:absolute;right:-40px;top:0;bottom:0;width:70px;background:linear-gradient(#D7222B,#A61E25);transform:skewX(-12deg)}
.logo{width:200px;max-width:60%;background:#fff;border-radius:12px;padding:12px;position:relative}.logo.sm{width:110px;padding:8px}
.sub{color:#aaa;letter-spacing:4px;font-size:12px;margin:12px 0 0;position:relative}
.wrap{max-width:720px;margin:auto;background:#f4f4f2;padding:24px 18px 40px;min-height:60vh}
.intro{color:#444;line-height:1.5}h2{color:#D7222B;letter-spacing:2px;text-transform:uppercase;font-size:16px;border-left:4px solid #D7222B;padding-left:8px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tile{display:flex;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:14px;text-decoration:none;box-shadow:0 1px 4px #0002;border-left:5px solid #D7222B}
.tile b{display:block;color:#D7222B;text-transform:uppercase}.tile span{font-size:13px;color:#555}.ex{display:block;font-size:11px;color:#999}
.av{flex:none;width:52px;height:52px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:700;border:3px solid #D7222B}
.av.big{width:96px;height:96px;font-size:34px;margin:-60px auto 10px;position:relative}
.card{max-width:480px;margin:0 auto;background:#f4f4f2;min-height:100vh}
.top{background:#0d0d0d;height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.redbar{position:absolute;right:-30px;top:0;bottom:0;width:60px;background:linear-gradient(#D7222B,#A61E25);transform:skewX(-12deg)}
.body{padding:0 20px 24px;text-align:center}h1{color:#D7222B;text-transform:uppercase;letter-spacing:1px;margin:4px 0}
.title{margin:0;font-weight:600;text-transform:uppercase;font-size:14px}.co{color:#666;font-size:13px;margin:4px 0 18px}
.save{display:block;background:linear-gradient(#D7222B,#A61E25);color:#fff;text-decoration:none;font-weight:700;font-size:20px;padding:18px;border-radius:12px;box-shadow:0 4px 10px #a61e2555}
.rows{list-style:none;padding:0;margin:18px 0;text-align:left}.rows a{display:block;background:#fff;margin-bottom:8px;padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:600;border-left:4px solid #111}
.rows span{display:block;font-size:11px;color:#D7222B;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btns a{background:#111;color:#fff;text-decoration:none;padding:13px;border-radius:10px;font-weight:600}.btns a:last-child{grid-column:1/-1}
.qr{margin-top:20px;background:#fff;padding:14px;border-radius:12px}.qr svg{width:170px;height:170px}.qr small{display:block;color:#777}
.back{text-align:center;background:#f4f4f2;margin:0;padding-bottom:10px}
footer{text-align:center;color:#888;font-size:12px;padding:16px;background:#0d0d0d}
img.av{object-fit:cover;padding:0;display:block}
img.av{background:radial-gradient(circle at 50% 35%,#ffffff 0%,#ececea 60%,#d9d9d6 100%)}