*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f4f1;font-family:Arial,Helvetica,sans-serif;color:#111}
.page{max-width:760px;margin:auto;padding-bottom:88px}
.hero{background:linear-gradient(145deg,#ffd51b,#f7b900);padding:22px 18px 28px;border-radius:0 0 30px 30px;text-align:center}
.online{display:inline-block;background:#111;color:#fff;border-radius:30px;padding:10px 20px;font-weight:700;margin-bottom:18px}
.avatar{width:145px;height:145px;margin:auto;border-radius:50%;background:#fff;padding:6px;box-shadow:0 5px 20px #0002}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top;display:block}
h1{font-size:34px;margin:14px 0 8px}
.role{display:inline-block;background:#111;color:#ffd21a;border-radius:24px;padding:11px 22px;font-weight:800}
.etiqa{background:#fff;border-radius:22px;margin:20px 0;padding:25px;font-size:42px;font-weight:500}
.etiqa span{display:block;font-size:12px;margin-top:-7px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn,.cta{display:block;text-decoration:none;border-radius:18px;padding:15px;font-weight:800}
.whatsapp{background:#13a85a;color:#fff}
.call{background:#fff;color:#111}
small{display:block;font-size:12px;font-weight:500;margin-top:4px}
.card{background:#fff;margin:16px 12px;padding:18px;border-radius:24px;box-shadow:0 4px 16px #0000000c}
.section-title{font-weight:900;font-size:18px;margin-bottom:15px}
.section-title span{float:right;background:#fff4bd;padding:7px 10px;border-radius:15px;font-size:11px}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.social-grid a{text-decoration:none;color:#111;background:#f8f8f8;border:1px solid #eee;border-radius:18px;padding:18px 8px;text-align:center;font-size:26px}
.social-grid b{display:block;font-size:13px;margin-top:7px}
.social-grid small{font-size:10px;color:#777}
.product img{width:100%;display:block;border-radius:16px}
.cta{background:#111;color:#ffd21a;text-align:center;margin-top:15px}
.contact{text-align:center}
.contact h2{margin:5px 0 8px}
.contact p{color:#555;line-height:1.5}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);background:#fff;border-top:1px solid #ddd;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px;z-index:10}
.bottom-nav a,.bottom-nav button{text-decoration:none;color:#333;background:none;border:0;font-size:20px;text-align:center}
.bottom-nav small{font-size:10px;margin-top:2px}
.bottom-nav .active{color:#111;background:#ffd21a;border-radius:50%;padding:8px}
@media(max-width:480px){.actions{grid-template-columns:1fr 1fr}.social-grid{grid-template-columns:repeat(2,1fr)}.etiqa{font-size:36px}}