*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1d2a33;background:#f6f3ee;line-height:1.55}
a{color:#0f5c6e}.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.banner{background:#fde68a;text-align:center;font-size:.85rem;padding:6px}
header{background:#0f3d4a;color:#fff;padding:14px 0}header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.3rem;letter-spacing:.5px}nav a{color:#fff;margin-left:14px;text-decoration:none}
.hero{min-height:52vh;display:flex;align-items:center;color:#fff;text-align:center;background:linear-gradient(135deg,rgba(15,61,74,.85),rgba(194,120,62,.75)),repeating-linear-gradient(45deg,#2b6777 0 22px,#327584 22px 44px)}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 8px}.btn{display:inline-block;background:#e0893f;color:#fff;font-weight:700;padding:14px 28px;border-radius:999px;text-decoration:none;font-size:1.1rem;margin:6px}
.btn.alt{background:transparent;border:2px solid #fff}section{padding:44px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.06)}.ph{height:160px;border-radius:12px;background:linear-gradient(120deg,#c9a27a,#e8d3b9);display:flex;align-items:center;justify-content:center;color:#6b4b2e;font-weight:600}
.ex{display:inline-block;background:#fde68a;color:#7a5a00;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase}
.qr img{width:200px;max-width:100%;background:#fff;padding:8px;border-radius:10px}footer{background:#0f3d4a;color:#cfe3e8;text-align:center;padding:22px;font-size:.85rem}
.frame{width:100%;height:80vh;border:0;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}