*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Roboto,Arial,sans-serif}
body{background:#fff;color:#1a1a1a;line-height:1.6}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* Header */
header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.top-bar{background:#f7f7f7;font-size:12px;padding:6px 0;color:#666}
.top-bar .container{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:12px}
.logo{font-size:26px;font-weight:800;color:#0a6b3a;letter-spacing:1px}
.logo span{color:#f4c20d}
nav ul{display:flex;gap:8px;flex-wrap:wrap}
nav ul li a{padding:10px 16px;font-weight:600;color:#222;border-radius:4px;display:inline-block;font-size:14px;transition:.2s}
nav ul li a:hover{background:#f0f0f0;color:#0a6b3a}
nav ul li a.active{background:#0a6b3a;color:#fff}
.auth-buttons{display:flex;gap:8px}
.btn{padding:10px 22px;border-radius:4px;font-weight:700;cursor:pointer;border:none;font-size:14px;transition:.2s}
.btn-login{background:#fff;color:#0a6b3a;border:2px solid #0a6b3a}
.btn-login:hover{background:#0a6b3a;color:#fff}
.btn-register{background:#f4c20d;color:#1a1a1a}
.btn-register:hover{background:#dca900}
/* Hero */
.hero{background:linear-gradient(135deg,#0a6b3a 0%,#0d8a4a 100%);color:#fff;position:relative;overflow:hidden}
.hero-inner{display:flex;align-items:center;justify-content:space-between;padding:60px 20px;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:30px}
.hero-text{flex:1;min-width:280px}
.hero-text h1{font-size:42px;margin-bottom:18px;line-height:1.2}
.hero-text p{font-size:17px;margin-bottom:24px;opacity:.95}
.hero-cta{background:#f4c20d;color:#1a1a1a;padding:14px 32px;font-weight:800;border-radius:4px;display:inline-block;font-size:15px}
.hero-img{flex:0 0 auto}
.hero-img img{max-width:490px;width:100%;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.hero-disclaimer{background:rgba(0,0,0,.25);padding:10px 0;font-size:12px;text-align:center}
/* Welcome bar */
.welcome{padding:46px 0 30px;text-align:center}
.welcome h2{font-size:26px;margin-bottom:8px;color:#0a6b3a;text-transform:uppercase}
.welcome p{color:#555;margin-bottom:26px}
.cat-icons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.cat-icons .ci{background:#0a6b3a;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;text-align:center;padding:6px}
/* Promotions */
.section{padding:50px 0}
.section-title{display:flex;align-items:center;gap:10px;font-size:20px;text-transform:uppercase;color:#1a1a1a;margin-bottom:24px;font-weight:800}
.section-title:before{content:"🎁";font-size:22px}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.promo-card{background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.promo-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.promo-card .pimg{height:170px;overflow:hidden;background:#0a3a22;display:flex;align-items:center;justify-content:center}
.promo-card .pimg img{width:100%;height:100%;object-fit:cover}
.promo-body{padding:18px;display:flex;flex-direction:column;flex:1}
.promo-tag{font-size:12px;color:#0a6b3a;font-weight:700;text-transform:uppercase;margin-bottom:6px}
.promo-body h3{font-size:17px;margin-bottom:10px;text-transform:uppercase}
.promo-body p{font-size:13px;color:#555;margin-bottom:14px;flex:1}
.promo-tc{font-size:11px;color:#888;margin-bottom:14px;line-height:1.5}
.promo-body .btn{background:#0a6b3a;color:#fff;align-self:flex-start;padding:10px 20px}
.see-all{text-align:center;margin-top:30px}
.see-all .btn{background:#0a6b3a;color:#fff;padding:14px 36px}
/* Safer / Trust */
.trust{background:#f4f4f4;text-align:center;padding:48px 0}
.trust h2{font-size:22px;margin-bottom:8px;text-transform:uppercase}
.trust>.container>p{color:#555;margin-bottom:30px}
.trust-icons{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-bottom:24px}
.ti{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:#0a6b3a;font-weight:600}
.ti .circ{width:48px;height:48px;border:2px solid #0a6b3a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
/* Features grid with images */
.features{padding:50px 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
.fcard{border:1px solid #e6e6e6;border-radius:8px;padding:14px;text-align:center;background:#fff}
.fcard img{width:100%;height:170px;object-fit:cover;border-radius:6px;margin-bottom:12px}
.fcard h4{font-size:14px;color:#0a6b3a;margin-bottom:6px}
.fcard p{font-size:12px;color:#666}
/* Article content */
.article{background:#1a1a1a;color:#ccc;padding:46px 0}
.article .container{max-width:820px}
.article h2{color:#f4c20d;text-align:center;font-size:22px;margin-bottom:18px}
.article p{font-size:14px;margin-bottom:14px;text-align:justify}
.article h3{color:#fff;margin:22px 0 10px;font-size:17px}
.article ul.list{margin:10px 0 14px 22px;color:#bbb}
.article ul.list li{list-style:disc;margin-bottom:6px;font-size:14px}
/* FAQ */
.faq{padding:50px 0;background:#fafafa}
.faq h2{text-align:center;font-size:24px;margin-bottom:28px;color:#0a6b3a}
.faq-item{background:#fff;border:1px solid #e6e6e6;border-radius:6px;padding:18px 22px;margin-bottom:14px}
.faq-item h4{color:#0a6b3a;margin-bottom:8px;font-size:15px}
.faq-item p{font-size:14px;color:#444}
.faq-item ul{margin:8px 0 0 22px}
.faq-item ul li{list-style:disc;font-size:14px;color:#555}
/* Review */
.review{background:#0a6b3a;color:#fff;padding:36px 0;text-align:center}
.review blockquote{max-width:760px;margin:0 auto;font-style:italic;font-size:16px;line-height:1.7}
/* Footer */
footer{background:#111;color:#bbb;padding:42px 0 20px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:28px}
.footer-col h5{color:#f4c20d;font-size:14px;margin-bottom:14px;text-transform:uppercase}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a:hover{color:#f4c20d}
.foot-bottom{border-top:1px solid #2a2a2a;padding-top:18px;text-align:center;color:#777;font-size:12px;line-height:1.8}
.age{display:inline-block;background:#c41e1e;color:#fff;padding:2px 8px;border-radius:3px;font-weight:700;margin-right:6px}
@media (max-width:768px){
.hero-text h1{font-size:30px}
.nav-wrap{justify-content:center}
nav ul{justify-content:center}
.top-bar .container{justify-content:center}
}
.cat-icons .ci img{width:100%;height:100%;object-fit:cover;object-position:center}
.ti .circ img{width:100%;height:100%;object-fit:cover;object-position:center}