<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Loja VIP — Zona Sul SP RP</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#f5a623;--gold2:#ffd700;--dark:#0d0d0d;--dark2:#161616;--dark3:#1c1c1c;
  --border:rgba(255,255,255,0.08);--text:#ffffff;--muted:#8a8a8a;--muted2:#b0b0b0;
  --discord:#5865f2;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;
}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;line-height:1.5;
  background-image:url('https://i.imgur.com/HR6QCWO.png');
  background-size:cover;background-position:center top;background-attachment:fixed;background-repeat:no-repeat;}
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.83);z-index:0;pointer-events:none}
nav,section,footer,.announce-bar{position:relative;z-index:1}
a{color:inherit;text-decoration:none}img{max-width:100%}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.announce-bar{background:linear-gradient(90deg,#b87d10,var(--gold),#ffd700,var(--gold),#b87d10);background-size:300% 100%;animation:shimmer 4s linear infinite;padding:10px 1.5rem;text-align:center;font-size:13px;font-weight:800;color:#000;letter-spacing:.5px;position:relative;z-index:1000;cursor:pointer;}
.announce-bar:hover{opacity:.92}
@keyframes shimmer{0%{background-position:300% 0}100%{background-position:-300% 0}}
nav{position:sticky;top:0;z-index:999;background:rgba(13,13,13,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 2rem}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;gap:2rem}
.nav-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo-img{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;display:block;box-shadow:0 0 12px rgba(245,166,35,0.4)}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.1}
.nav-brand-text small{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.nav-brand-text strong{font-size:16px;font-weight:700;color:#fff}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{font-size:13px;font-weight:500;color:var(--muted2);transition:color .2s}
.nav-links a:hover{color:#fff}
.btn-discord-nav{background:var(--discord);color:#fff;padding:10px 20px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap}
.btn-discord-nav:hover{background:#4752c4;transform:translateY(-1px)}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:6rem 1.5rem 4rem}
.hero-glow{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(ellipse,rgba(245,166,35,0.13) 0%,transparent 65%);pointer-events:none;z-index:0}
.hero-content{position:relative;z-index:1;max-width:820px}
.hero-logo-circle{width:150px;height:150px;border-radius:50%;border:3px solid var(--gold);margin:0 auto 1.5rem;overflow:hidden;box-shadow:0 0 50px rgba(245,166,35,0.45),0 0 100px rgba(245,166,35,0.15);background:#0d0d0d}
.hero-logo-circle img{width:100%;height:100%;object-fit:cover;display:block}
.hero-inaug-badge{display:inline-block;background:linear-gradient(135deg,rgba(245,166,35,0.2),rgba(245,166,35,0.08));border:1px solid rgba(245,166,35,0.4);border-radius:50px;padding:6px 18px;font-size:11px;font-weight:800;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.hero-tag{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem;color:#fff}
.hero h1 span{color:var(--gold)}
.hero p{font-size:1rem;color:var(--muted2);max-width:540px;margin:0 auto 2.5rem;line-height:1.7}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:5rem}
.btn-yellow{background:var(--gold);color:#000;padding:13px 28px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:all .2s}
.btn-yellow:hover{background:var(--gold2);transform:translateY(-2px)}
.btn-dark-outline{background:transparent;color:#fff;padding:13px 28px;border-radius:50px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,0.2);transition:all .2s}
.btn-dark-outline:hover{border-color:rgba(255,255,255,0.5)}
.btn-discord-hero{background:var(--discord);color:#fff;padding:13px 28px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:all .2s}
.btn-discord-hero:hover{background:#4752c4;transform:translateY(-2px)}
.stats-bar{background:rgba(22,22,22,0.9);backdrop-filter:blur(16px);border-radius:20px;padding:2rem 3rem;display:flex;justify-content:space-around;align-items:center;gap:2rem;flex-wrap:wrap;max-width:960px;width:100%;position:relative;z-index:1;border:1px solid var(--border)}
.stat-item{text-align:center}
.stat-item strong{display:block;font-size:2rem;font-weight:800;color:var(--gold);line-height:1}
.stat-item span{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block}
.section{padding:6rem 1.5rem}
.container{max-width:1100px;margin:0 auto}
.section-tag{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;text-align:center}
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;text-align:center;margin-bottom:.75rem}
.section-sub{text-align:center;color:var(--muted2);font-size:.95rem;max-width:520px;margin:0 auto 3.5rem;line-height:1.7}
.countdown-wrap{background:linear-gradient(135deg,rgba(245,166,35,0.12),rgba(245,166,35,0.04));border:1px solid rgba(245,166,35,0.35);border-radius:20px;padding:2.5rem 2rem;text-align:center;margin-bottom:5rem}
.countdown-label{font-size:11px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.countdown-title{font-size:1.4rem;font-weight:700;margin-bottom:1.75rem}
.countdown-boxes{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap}
.cd-box{background:rgba(0,0,0,0.4);border:1px solid rgba(245,166,35,0.25);border-radius:14px;padding:1.1rem 1.5rem;min-width:80px;text-align:center}
.cd-num{font-size:2.8rem;font-weight:800;color:var(--gold);line-height:1;display:block}
.cd-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block}
.cd-sep{font-size:2.5rem;font-weight:300;color:rgba(245,166,35,0.4);align-self:center;padding-bottom:.5rem}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem}
.how-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;padding:1.75rem;transition:border-color .2s}
.how-card:hover{border-color:rgba(245,166,35,0.25)}
.how-num{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#000;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.how-card h3{font-size:1rem;font-weight:700;margin-bottom:.5rem}
.how-card p{font-size:.85rem;color:var(--muted2);line-height:1.6}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem;align-items:start}
.plan-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;transition:all .25s}
.plan-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-4px)}
.plan-card.featured{border-color:rgba(245,166,35,0.5);background:linear-gradient(160deg,rgba(245,166,35,0.1) 0%,rgba(22,22,22,0.88) 60%)}
.plan-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:11px;font-weight:800;letter-spacing:1.5px;padding:5px 18px;border-radius:50px;text-transform:uppercase;white-space:nowrap}
.plan-name{font-size:1.1rem;font-weight:700;margin-bottom:.75rem}
.plan-price{font-size:3rem;font-weight:800;line-height:1;margin-bottom:.25rem}
.plan-price sub{font-size:1rem;font-weight:500;color:var(--muted2)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem;margin-top:1rem}
.plan-features li{font-size:.88rem;color:var(--muted2);display:flex;align-items:flex-start;gap:.6rem}
.plan-features li::before{content:'✓';color:var(--green);font-weight:700;font-size:.85rem;flex-shrink:0;margin-top:.05rem}
.btn-plan-yellow{width:100%;background:var(--gold);color:#000;padding:13px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:all .2s}
.btn-plan-yellow:hover{background:var(--gold2)}
.btn-plan-dark{width:100%;background:transparent;color:var(--muted2);padding:13px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,0.12);transition:all .2s}
.btn-plan-dark:hover{border-color:rgba(255,255,255,0.3);color:#fff}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.why-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:1.5rem;transition:border-color .2s}
.why-card:hover{border-color:rgba(245,166,35,0.25)}
.why-card-icon{font-size:2rem;margin-bottom:.75rem;display:block}
.why-card h3{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:.6rem}
.why-card p{font-size:.87rem;color:var(--muted2);line-height:1.6}
.city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.city-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:1.5rem;text-align:center;transition:all .2s}
.city-card:hover{border-color:rgba(245,166,35,0.2);transform:translateY(-2px)}
.city-card-icon{font-size:2.4rem;margin-bottom:.75rem;display:block}
.city-card h3{font-size:.95rem;font-weight:700;margin-bottom:.3rem}
.city-card p{font-size:.8rem;color:var(--muted2);line-height:1.5}
.orgs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.org-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:all .2s}
.org-card:hover{border-color:rgba(245,166,35,0.2);transform:translateY(-2px)}
.org-icon{font-size:2.2rem;flex-shrink:0}
.org-info h3{font-size:.95rem;font-weight:700;margin-bottom:.3rem}
.org-info p{font-size:.82rem;color:var(--muted2);line-height:1.5}
.org-tag{display:inline-block;margin-top:.5rem;font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:.5px}
.org-tag.policia{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)}
.org-tag.crime{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.2)}
.org-tag.civil{background:rgba(34,197,94,0.12);color:#4ade80;border:1px solid rgba(34,197,94,0.2)}
.org-tag.emergencia{background:rgba(245,166,35,0.12);color:var(--gold);border:1px solid rgba(245,166,35,0.25)}
.wl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.wl-step{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;padding:1.75rem;text-align:center;transition:border-color .2s}
.wl-step:hover{border-color:rgba(245,166,35,0.2)}
.wl-step-num{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#e8940f);color:#000;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.wl-step h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem}
.wl-step p{font-size:.82rem;color:var(--muted2);line-height:1.6}
.cars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.car-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all .2s}
.car-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-3px)}
.car-img-area{background:#111;height:190px;overflow:hidden;position:relative}
.car-img-area img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.car-card:hover .car-img-area img{transform:scale(1.06)}
.car-body{padding:1.25rem 1.5rem 1.5rem}
.car-body h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.car-body p{font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5}
.car-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.price-gold{font-size:1.6rem;font-weight:800;color:var(--gold)}
.btn-buy{background:var(--gold);color:#000;padding:9px 24px;border-radius:50px;font-weight:700;font-size:13px;cursor:pointer;border:none;transition:all .2s;white-space:nowrap}
.btn-buy:hover{background:var(--gold2);transform:scale(1.04)}
.vehicle-type-badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 10px;border-radius:50px;letter-spacing:.5px;margin-bottom:.5rem}
.badge-car{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)}
.badge-moto{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.2)}
.gems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:1.25rem}
.gem-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:18px;padding:1.75rem 1.25rem;text-align:center;position:relative;transition:all .2s}
.gem-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-3px)}
.gem-bonus-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:10px;font-weight:800;padding:4px 14px;border-radius:50px;white-space:nowrap;letter-spacing:.5px}
.gem-emoji{font-size:2.5rem;margin-bottom:.75rem;display:block}
.gem-amount{font-size:2.2rem;font-weight:800;line-height:1}
.gem-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:block}
.gem-price{font-size:1.3rem;font-weight:800;color:var(--gold);margin-bottom:1.25rem}
.btn-gem{width:100%;background:transparent;color:var(--muted2);padding:10px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid rgba(255,255,255,0.15);transition:all .2s}
.btn-gem:hover{border-color:rgba(255,255,255,0.35);color:#fff}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.svc-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all .2s}
.svc-card:hover{border-color:rgba(245,166,35,0.2);transform:translateY(-2px)}
.svc-img-area{height:160px;overflow:hidden;position:relative}
.svc-img-area img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.svc-card:hover .svc-img-area img{transform:scale(1.06)}
.svc-body{padding:1.25rem 1.5rem 1.5rem}
.svc-body h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.svc-body p{font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5}
.svc-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.discord-banner{background:linear-gradient(135deg,rgba(88,101,242,0.2),rgba(88,101,242,0.08));backdrop-filter:blur(12px);border:1px solid rgba(88,101,242,0.3);border-radius:24px;padding:4rem 2rem;text-align:center}
.discord-banner h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;margin-bottom:1rem}
.discord-banner p{color:var(--muted2);max-width:540px;margin:0 auto 2rem;line-height:1.7;font-size:.95rem}
.discord-member-count{display:inline-block;background:rgba(88,101,242,0.2);border:1px solid rgba(88,101,242,0.3);border-radius:50px;padding:8px 20px;font-size:13px;font-weight:700;color:#a5b4fc;margin-bottom:1.5rem}
.events-list{display:flex;flex-direction:column;gap:1rem;max-width:780px;margin:0 auto}
.event-item{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;transition:border-color .2s}
.event-item:hover{border-color:rgba(245,166,35,0.25)}
.event-date-box{background:var(--gold);color:#000;border-radius:12px;padding:.65rem 1rem;text-align:center;min-width:64px;flex-shrink:0}
.event-date-box strong{font-size:1.7rem;font-weight:800;display:block;line-height:1}
.event-date-box span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.event-info{flex:1}
.event-info h3{font-size:.95rem;font-weight:700;margin-bottom:.2rem}
.event-info p{font-size:.82rem;color:var(--muted2)}
.event-type-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 10px;border-radius:50px;margin-top:.4rem;letter-spacing:.5px}
.event-type-tag.inauguracao{background:rgba(245,166,35,0.15);color:var(--gold);border:1px solid rgba(245,166,35,0.3)}
.btn-event{background:transparent;color:var(--gold);border:1px solid rgba(245,166,35,0.3);padding:9px 20px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.btn-event:hover{background:rgba(245,166,35,0.1)}
.houses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.house-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all .2s}
.house-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-3px)}
.house-img-area{background:linear-gradient(135deg,#1e1c0e,#151308);height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.house-img-area.with-photo{height:180px;padding:0}
.house-img-area.with-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.house-card:hover .house-img-area.with-photo img{transform:scale(1.06)}
.house-body{padding:1.25rem 1.5rem 1.5rem}
.house-body h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.house-body p{font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5}
.weapons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.weapon-card{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all .2s}
.weapon-card:hover{border-color:rgba(239,68,68,0.2);transform:translateY(-3px)}
.weapon-img-area{background:linear-gradient(135deg,#1e1010,#150d0d);height:100px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.weapon-body{padding:1.25rem 1.5rem 1.5rem}
.weapon-body h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}
.weapon-body p{font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.875rem}
.rule-item{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.75rem;font-size:.87rem;color:var(--muted2)}
.rule-icon{font-size:1.1rem;flex-shrink:0}
.coupon-strip{background:linear-gradient(135deg,rgba(245,166,35,0.13),rgba(245,166,35,0.04));border:1px solid rgba(245,166,35,0.28);border-radius:16px;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:5rem}
.coupon-left{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.coupon-tag{font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.3rem}
.coupon-text{font-size:1rem;font-weight:600;color:#fff}
.coupon-code{background:var(--gold);color:#000;font-size:14px;font-weight:800;padding:5px 14px;border-radius:8px;letter-spacing:1px;display:inline-block}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem}
.staff-card{text-align:center;background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:border-color .2s}
.staff-card:hover{border-color:rgba(245,166,35,0.2)}
.staff-avatar{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#000;margin:0 auto .9rem;border:2px solid rgba(245,166,35,0.4)}
.staff-card h3{font-size:.9rem;font-weight:700;margin-bottom:.2rem}
.staff-card span{font-size:.75rem;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.staff-role-tag{font-size:.72rem;color:var(--muted);margin-top:.2rem;display:block}
.newsletter-form{display:flex;gap:.75rem;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-input{flex:1;min-width:220px;background:rgba(22,22,22,0.88);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:12px 16px;color:#fff;font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s}
.newsletter-input:focus{border-color:rgba(245,166,35,0.4)}
.newsletter-input::placeholder{color:var(--muted)}
.faq-list{display:flex;flex-direction:column;gap:.875rem;max-width:740px;margin:0 auto}
.faq-item{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:rgba(245,166,35,0.15)}
.faq-q{padding:1.1rem 1.5rem;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;user-select:none}
.faq-q::after{content:'+';color:var(--gold);font-size:1.4rem;font-weight:300;line-height:1;flex-shrink:0}
.faq-item.open .faq-q::after{content:'−'}
.faq-a{font-size:.88rem;color:var(--muted2);line-height:1.7;padding:0 1.5rem 1.1rem;display:none}
.faq-item.open .faq-a{display:block}
.partners-row{display:flex;gap:1.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.partner-badge{background:rgba(22,22,22,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:10px;padding:.65rem 1.35rem;font-size:.82rem;font-weight:600;color:var(--muted2);transition:all .2s;cursor:default}
.partner-badge:hover{border-color:rgba(245,166,35,0.25);color:#fff}
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:rgba(18,18,18,0.98);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;min-width:280px;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:toastIn .35s cubic-bezier(.16,1,.3,1);pointer-events:auto}
.toast.success{border-color:rgba(34,197,94,0.3)}
.toast-icon{font-size:1.3rem;flex-shrink:0}
.toast-body{flex:1}
.toast-title{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:2px}
.toast-msg{font-size:.78rem;color:var(--muted2)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}
footer{border-top:1px solid var(--border);padding:3rem 1.5rem 2rem;background:rgba(0,0,0,0.55);backdrop-filter:blur(12px)}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;margin-bottom:2.5rem}
.footer-col h4{font-size:.85rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1rem}
.footer-col p,.footer-col a{font-size:.83rem;color:var(--muted);line-height:1.8;display:block;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-text{font-size:.82rem;color:var(--muted)}
.footer-discord-btn{background:var(--discord);color:#fff;padding:9px 20px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.footer-discord-btn:hover{background:#4752c4}
/* Mansão VIP - galeria de imagens */
.mansion-gallery{display:grid;grid-template-columns:1fr 1fr;gap:0;height:180px;overflow:hidden}
.mansion-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.mansion-gallery img:first-child{border-right:2px solid rgba(0,0,0,0.5)}
.house-card:hover .mansion-gallery img{transform:scale(1.06)}
@media(max-width:768px){
  .nav-links{display:none}
  .hero h1{font-size:2.2rem}
  .stats-bar{padding:1.5rem;gap:1.5rem}
  .stat-item strong{font-size:1.6rem}
  .coupon-strip{flex-direction:column;text-align:center}
  .event-item{flex-direction:column;text-align:center}
  .btn-event{width:100%}
  .countdown-boxes{gap:.75rem}
  .cd-box{min-width:65px;padding:.9rem 1rem}
  .cd-num{font-size:2.2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  #toast-container{bottom:16px;right:16px;left:16px}
  .toast{min-width:unset;max-width:unset}
}
</style>
</head>
<body>
<div id="toast-container"></div>

<div class="announce-bar" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">
  🎉 INAUGURAÇÃO DIA 3 DE JUNHO — Clique para entrar no Discord e garantir seu lugar na cidade!
</div>

<nav>
  <div class="nav-inner">
    <div class="nav-brand">
      <img class="nav-logo-img" src="https://i.imgur.com/HR6QCWO.png" alt="Zona Sul SP Logo"/>
      <div class="nav-brand-text"><small>FiveM RP</small><strong>Zona Sul SP</strong></div>
    </div>
    <ul class="nav-links">
      <li><a href="#cidade">A Cidade</a></li>
      <li><a href="#whitelist">Whitelist</a></li>
      <li><a href="#planos">VIP</a></li>
      <li><a href="#carros">Carros</a></li>
      <li><a href="#motos">Motos</a></li>
      <li><a href="#gemas">Gemas</a></li>
      <li><a href="#eventos">Eventos</a></li>
      <li><a href="#faq">FAQ</a></li>
    </ul>
    <button class="btn-discord-nav" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Entrar no Discord</button>
  </div>
</nav>

<section class="hero">
  <div class="hero-glow"></div>
  <div class="hero-content">
    <div class="hero-logo-circle"><img src="https://i.imgur.com/HR6QCWO.png" alt="Zona Sul SP"/></div>
    <div class="hero-inaug-badge">🗓️ Inauguração — 3 de Junho</div>
    <p class="hero-tag">Loja Oficial VIP</p>
    <h1>A cidade onde sua<br>história começa na<br><span>Zona Sul SP</span></h1>
    <p>Polícia ativa, SAMU, Corpo de Bombeiros, carros exclusivos, empregos e organizações. A experiência RP mais completa da Zona Sul de São Paulo.</p>
    <div class="hero-btns">
      <button class="btn-yellow" onclick="document.getElementById('planos').scrollIntoView({behavior:'smooth'})">Ver planos VIP</button>
      <button class="btn-dark-outline" onclick="document.getElementById('whitelist').scrollIntoView({behavior:'smooth'})">Fazer Whitelist</button>
      <button class="btn-discord-hero" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Entrar no Discord</button>
    </div>
    <div class="stats-bar">
      <div class="stat-item"><strong>2.000+</strong><span>Membros no Discord</span></div>
      <div class="stat-item"><strong>3 Jun</strong><span>Inauguração</span></div>
      <div class="stat-item"><strong>24/7</strong><span>Suporte online</span></div>
      <div class="stat-item"><strong>100%</strong><span>Avaliações positivas</span></div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:3rem;padding-bottom:3rem">
  <div class="container">
    <div class="countdown-wrap">
      <p class="countdown-label">🎉 Contagem Regressiva</p>
      <h2 class="countdown-title">Inauguração oficial da cidade — 3 de Junho de 2026</h2>
      <div class="countdown-boxes">
        <div class="cd-box"><span class="cd-num" id="cd-d">--</span><span class="cd-lbl">Dias</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-box"><span class="cd-num" id="cd-h">--</span><span class="cd-lbl">Horas</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-box"><span class="cd-num" id="cd-m">--</span><span class="cd-lbl">Min</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-box"><span class="cd-num" id="cd-s">--</span><span class="cd-lbl">Seg</span></div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="cidade" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">O que a cidade oferece</p>
    <h2 class="section-title">Tudo que você encontra na Zona Sul SP</h2>
    <p class="section-sub">Uma cidade viva com serviços, ação e roleplay de alto nível.</p>
    <div class="city-grid">
      <div class="city-card"><span class="city-card-icon">🚓</span><h3>Polícia Ativa</h3><p>Delegacias, viaturas e operações táticas reais.</p></div>
      <div class="city-card"><span class="city-card-icon">🚑</span><h3>SAMU</h3><p>Resgate, atendimento pré-hospitalar e UTI móvel.</p></div>
      <div class="city-card"><span class="city-card-icon">🔥</span><h3>Corpo de Bombeiros</h3><p>Combate a incêndios, resgates e missões especiais.</p></div>
      <div class="city-card"><span class="city-card-icon">🚗</span><h3>Carros Exclusivos</h3><p>Centenas de veículos customizados e únicos.</p></div>
      <div class="city-card"><span class="city-card-icon">💼</span><h3>Empregos & Carreiras</h3><p>Salários reais e progressão de carreira in-game.</p></div>
      <div class="city-card"><span class="city-card-icon">🏢</span><h3>Organizações</h3><p>Facções, gangues e empresas com território próprio.</p></div>
      <div class="city-card"><span class="city-card-icon">🎉</span><h3>Eventos Semanais</h3><p>Corridas, torneios e eventos exclusivos com prêmios.</p></div>
      <div class="city-card"><span class="city-card-icon">🏠</span><h3>Imóveis & Negócios</h3><p>Casas, apartamentos e pontos comerciais à venda.</p></div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Vida na Cidade</p>
    <h2 class="section-title">Organizações & Facções</h2>
    <p class="section-sub">Escolha seu lado e escreva sua história na Zona Sul.</p>
    <div class="orgs-grid">
      <div class="org-card"><span class="org-icon">👮</span><div class="org-info"><h3>Polícia Civil & Militar</h3><p>Patrulhe as ruas, investigue crimes e mantenha a ordem na cidade.</p><span class="org-tag policia">Força da Lei</span></div></div>
      <div class="org-card"><span class="org-icon">🚑</span><div class="org-info"><h3>SAMU & Bombeiros</h3><p>Salve vidas no campo, responda a emergências e proteja a população.</p><span class="org-tag emergencia">Emergência</span></div></div>
      <div class="org-card"><span class="org-icon">💊</span><div class="org-info"><h3>Cartéis & Gangues</h3><p>Domine territórios, controle o tráfico e expanda seu império.</p><span class="org-tag crime">Crime Organizado</span></div></div>
      <div class="org-card"><span class="org-icon">⚖️</span><div class="org-info"><h3>Advocacia & Judiciário</h3><p>Defenda acusados, processe criminosos e faça a justiça prevalecer.</p><span class="org-tag civil">Civil</span></div></div>
      <div class="org-card"><span class="org-icon">📰</span><div class="org-info"><h3>Imprensa & Mídia</h3><p>Cubra os acontecimentos da cidade e entreviste os maiores nomes do RP.</p><span class="org-tag civil">Civil</span></div></div>
      <div class="org-card"><span class="org-icon">🔧</span><div class="org-info"><h3>Mecânicas & Empresas</h3><p>Abra seu negócio, contrate funcionários e fature na economia da cidade.</p><span class="org-tag civil">Empresarial</span></div></div>
    </div>
  </div>
</section>

<section class="section" id="whitelist" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Como entrar</p>
    <h2 class="section-title">Faça sua Whitelist</h2>
    <p class="section-sub">Para jogar na Zona Sul SP é necessário aprovação. O processo é rápido!</p>
    <div class="wl-steps">
      <div class="wl-step"><div class="wl-step-num">1</div><h3>Entre no Discord</h3><p>Acesse nosso servidor oficial e leia as regras do canal #boas-vindas.</p></div>
      <div class="wl-step"><div class="wl-step-num">2</div><h3>Abra um Ticket</h3><p>Vá até o canal de whitelist e abra um ticket com o staff.</p></div>
      <div class="wl-step"><div class="wl-step-num">3</div><h3>Responda o Form</h3><p>Preencha o formulário de whitelist com seu personagem e história.</p></div>
      <div class="wl-step"><div class="wl-step-num">4</div><h3>Aprovação</h3><p>O staff analisa em até 24h. Aprovado, você já entra na cidade!</p></div>
    </div>
    <div style="text-align:center;margin-top:2.5rem">
      <button class="btn-discord-hero" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Iniciar Whitelist no Discord →</button>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Loja VIP</p>
    <h2 class="section-title">Como comprar na loja</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="how-grid">
      <div class="how-card"><div class="how-num">1</div><h3>Escolha o item</h3><p>Selecione VIP, carro, gemas ou serviço desejado.</p></div>
      <div class="how-card"><div class="how-num">2</div><h3>Entre no Discord</h3><p>Abra um ticket com o staff no canal de compras.</p></div>
      <div class="how-card"><div class="how-num">3</div><h3>Pague com Pix</h3><p>Pagamento rápido e seguro, aprovação imediata.</p></div>
      <div class="how-card"><div class="how-num">4</div><h3>Receba in-game</h3><p>Itens entregues no seu personagem em minutos.</p></div>
    </div>
  </div>
</section>

<section class="section" id="planos" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Planos VIP</p>
    <h2 class="section-title">Escolha seu plano VIP</h2>
    <p class="section-sub">Pagamento mensal via Pix. Cancele quando quiser.</p>
    <div class="plans-grid">
      <div class="plan-card">
        <p class="plan-name">🥉 VIP Bronze</p>
        <div class="plan-price">R$ 50<sub>/mês</sub></div>
        <ul class="plan-features"><li>Acesso ao canal VIP no Discord</li><li>Salário extra semanal 20K  in-game</li><li>Prioridade na fila do servidor</li><li>Tag VIP Bronze no Discord</li></ul>
        <button class="btn-plan-dark" data-item="VIP Bronze" data-price="R$ 50/mês" data-categoria="Plano VIP" data-emoji="🥉">Comprar agora</button>
      </div>
      <div class="plan-card featured">
        <span class="plan-popular-badge">MAIS POPULAR</span>
        <p class="plan-name">🥈 VIP Prata</p>
        <div class="plan-price">R$ 100<sub>/mês</sub></div>
        <ul class="plan-features"><li>Todos os benefícios Bronze salário 50k semanal in-game </li><li>Garagem expandida (+5 vagas)</li><li>Skin exclusiva de roupa</li><li>Suporte prioritário 24h</li><li>Bônus de dinheiro semanal</li></ul>
        <button class="btn-plan-yellow" data-item="VIP Prata" data-price="R$ 100/mês" data-categoria="Plano VIP" data-emoji="🥈">Comprar agora</button>
      </div>
      <div class="plan-card">
        <p class="plan-name">🥇 VIP Ouro</p>
        <div class="plan-price">R$ 200<sub>/mês</sub></div>
        <ul class="plan-features"><li>Todos os benefícios Prata salário 120k semanal in-game</li><li>Veículo exclusivo VIP</li><li>Casa premium na Zona Sul</li><li>Acesso antecipado a updates</li><li>Canal privado com os donos</li><li>Cargo especial no Discord</li></ul>
        <button class="btn-plan-dark" data-item="VIP Ouro" data-price="R$ 200/mês" data-categoria="Plano VIP" data-emoji="🥇">Comprar agora</button>
      </div>
    </div>
  </div>
</section>

<section class="section" id="beneficios" style="padding-top:2rem">
  <div class="container">
    <h2 class="section-title">Por que ser VIP?</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="why-grid">
      <div class="why-card"><span class="why-card-icon">⚡</span><h3>Fila prioritária</h3><p>Entre no servidor sem esperar, mesmo na lotação máxima. Nunca perca um evento por fila.</p></div>
      <div class="why-card"><span class="why-card-icon">💰</span><h3>Vantagens econômicas</h3><p>Salários e bonificações extras toda semana. Comece rico e escale na cidade mais rápido.</p></div>
      <div class="why-card"><span class="why-card-icon">🎽</span><h3>Itens exclusivos</h3><p>Veículos, roupas e propriedades que só membros VIP têm acesso. Destaque-se na cidade.</p></div>
      <div class="why-card"><span class="why-card-icon">🎧</span><h3>Suporte dedicado</h3><p>Atendimento prioritário no Discord. Problemas resolvidos em minutos, não horas.</p></div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem;padding-bottom:0">
  <div class="container">
    <div class="coupon-strip">
      <div class="coupon-left"><div><span class="coupon-tag">🎁 Promoção de Inauguração</span><span class="coupon-text">Use o cupom <span class="coupon-code">ZONASUL5</span> e ganhe 5% off em qualquer VIP!</span></div></div>
      <button class="btn-yellow" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Resgatar no Discord</button>
    </div>
  </div>
</section>

<section class="section" id="eventos" style="padding-top:4rem">
  <div class="container">
    <p class="section-tag">Agenda</p>
    <h2 class="section-title">Próximos Eventos</h2>
    <p class="section-sub">Participe e concorra a prêmios exclusivos dentro da cidade.</p>
    <div class="events-list">
      <div class="event-item">
        <div class="event-date-box"><strong>3</strong><span>JUN</span></div>
        <div class="event-info">
          <h3>🎉 Inauguração Oficial da Cidade</h3>
          <p>Abertura dos servidores com evento especial, distribuição de itens e sorteio de VIP Ouro.</p>
          <span class="event-type-tag inauguracao">INAUGURAÇÃO</span>
        </div>
        <button class="btn-event" data-item="Evento de Inauguração" data-price="Gratuito" data-categoria="Evento" data-emoji="🎉">Participar</button>
      </div>
    </div>
  </div>
</section>

<!-- ████████████████ CARROS ████████████████ -->
<section class="section" id="carros" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Concessionária VIP</p>
    <h2 class="section-title">Venda de Carros</h2>
    <p class="section-sub">Veículos exclusivos entregues direto na sua garagem in-game.</p>
    <div class="cars-grid">

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/is8oRGe.jpeg" alt="Esportivo Classe A" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Esportivo Classe A</h3>
          <p>Velocidade máxima, perfeito para corridas urbanas. Top speed exclusivo.</p>
          <div class="car-footer"><span class="price-gold">R$ 40</span><button class="btn-buy" data-item="Esportivo Classe A" data-price="R$ 40" data-categoria="Carro" data-emoji="🏎️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/LydoNjb.jpeg" alt="SUV Blindado" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>SUV Blindado</h3>
          <p>Resistência elevada, ideal para missões pesadas e proteção VIP.</p>
          <div class="car-footer"><span class="price-gold">R$ 65</span><button class="btn-buy" data-item="SUV Blindado" data-price="R$ 65" data-categoria="Carro" data-emoji="🚙">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/9XennRU.jpeg" alt="Cupê Esportivo VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Cupê Esportivo VIP</h3>
          <p>Design agressivo, suspensão rebaixada e acabamento premium.</p>
          <div class="car-footer"><span class="price-gold">R$ 85</span><button class="btn-buy" data-item="Cupê Esportivo VIP" data-price="R$ 85" data-categoria="Carro" data-emoji="🚗">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/GFKLsxn.jpeg" alt="Super Carro Edição VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Super Carro Edição VIP</h3>
          <p>Pintura exclusiva, performance lendária. Modelo único no servidor.</p>
          <div class="car-footer"><span class="price-gold">R$ 200</span><button class="btn-buy" data-item="Super Carro Edição VIP" data-price="R$ 200" data-categoria="Carro" data-emoji="🏎️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/0FkyFBa.jpeg" alt="Muscle Car Clássico" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Muscle Car Clássico</h3>
          <p>Motor V8 rugindo, visual imponente e presença absurda nas ruas da Zona Sul.</p>
          <div class="car-footer"><span class="price-gold">R$ 110</span><button class="btn-buy" data-item="Muscle Car Clássico" data-price="R$ 110" data-categoria="Carro" data-emoji="🏎️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/40ZJZyZ.jpeg" alt="Hatchback Sport" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Hatchback Sport</h3>
          <p>Compacto, ágil e estiloso. Perfeito para zanzar pelas ruelas da Zona Sul.</p>
          <div class="car-footer"><span class="price-gold">R$ 55</span><button class="btn-buy" data-item="Hatchback Sport" data-price="R$ 55" data-categoria="Carro" data-emoji="🚗">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/mdfQQon.jpeg" alt="Picape Off-Road" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Picape Off-Road</h3>
          <p>Tração 4x4, caçamba robusta e suspensão elevada para qualquer terreno.</p>
          <div class="car-footer"><span class="price-gold">R$ 130</span><button class="btn-buy" data-item="Picape Off-Road" data-price="R$ 130" data-categoria="Carro" data-emoji="🛻">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/umJy79s.jpeg" alt="Carro Drift VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Carro Drift VIP</h3>
          <p>Traseira solta, tração rebaixada e visual de competição. Feito para derrapar.</p>
          <div class="car-footer"><span class="price-gold">R$ 160</span><button class="btn-buy" data-item="Carro Drift VIP" data-price="R$ 160" data-categoria="Carro" data-emoji="🏎️">Comprar</button></div>
        </div>
      </div>

      <!-- ✅ Carros movidos da seção de motos -->
      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/noHWSHx.jpeg" alt="Trail Off-Road" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Trail Off-Road</h3>
          <p>Domina asfalto e terra. Ideal para explorar os becos e vielas da cidade.</p>
          <div class="car-footer"><span class="price-gold">R$ 50</span><button class="btn-buy" data-item="Trail Off-Road" data-price="R$ 50" data-categoria="Carro" data-emoji="🚗">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/GWf9U5V.jpeg" alt="Urbano Compacto" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Urbano Compacto</h3>
          <p>Leve e ágil para o trânsito pesado. Fura o engarrafamento e entrega a tempo.</p>
          <div class="car-footer"><span class="price-gold">R$ 25</span><button class="btn-buy" data-item="Urbano Compacto" data-price="R$ 25" data-categoria="Carro" data-emoji="🚗">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/GwtYUqD.png" alt="Supercarro VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Supercarro VIP</h3>
          <p>Top speed absurdo, aerodinâmica de corrida e frenagem esportiva. Para os mais ousados.</p>
          <div class="car-footer"><span class="price-gold">R$ 95</span><button class="btn-buy" data-item="Supercarro VIP" data-price="R$ 95" data-categoria="Carro" data-emoji="🏎️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/DblPq46.jpeg" alt="Big Trail VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-car">🚗 Carro</span>
          <h3>Big Trail VIP</h3>
          <p>Versátil, potente e com visual aventureiro. Conquista qualquer rota da Zona Sul.</p>
          <div class="car-footer"><span class="price-gold">R$ 80</span><button class="btn-buy" data-item="Big Trail VIP" data-price="R$ 80" data-categoria="Carro" data-emoji="🚗">Comprar</button></div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ████████████████ MOTOS ████████████████ -->
<section class="section" id="motos" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Garagem de Motos</p>
    <h2 class="section-title">Venda de Motos</h2>
    <p class="section-sub">Motos potentes para dominar as ruas da Zona Sul com estilo.</p>
    <div class="cars-grid">

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/ldi9pP3.jpeg" alt="Moto Esportiva" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-moto">🏍️ Moto</span>
          <h3>Moto Esportiva</h3>
          <p>Agilidade extrema para fugir da polícia ou dominar as vielas.</p>
          <div class="car-footer"><span class="price-gold">R$ 35</span><button class="btn-buy" data-item="Moto Esportiva" data-price="R$ 35" data-categoria="Moto" data-emoji="🏍️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/tM8yyw4.jpeg" alt="Moto Custom VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-moto">🏍️ Moto</span>
          <h3>Moto Custom VIP</h3>
          <p>Customização exclusiva, pintura única e motor turbinado.</p>
          <div class="car-footer"><span class="price-gold">R$ 55</span><button class="btn-buy" data-item="Moto Custom VIP" data-price="R$ 55" data-categoria="Moto" data-emoji="🏍️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/DORoVff.jpeg" alt="Moto Naked Street" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-moto">🏍️ Moto</span>
          <h3>Moto Naked Street</h3>
          <p>Estilo rasgado, sem carenagem e potência bruta para dominar o asfalto.</p>
          <div class="car-footer"><span class="price-gold">R$ 45</span><button class="btn-buy" data-item="Moto Naked Street" data-price="R$ 45" data-categoria="Moto" data-emoji="🏍️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/udSdL3l.jpeg" alt="Moto Chopper VIP" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-moto">🏍️ Moto</span>
          <h3>Moto Chopper VIP</h3>
          <p>Estilo americano, garfo alongado e ronco pesado. Presença garantida na cidade.</p>
          <div class="car-footer"><span class="price-gold">R$ 70</span><button class="btn-buy" data-item="Moto Chopper VIP" data-price="R$ 70" data-categoria="Moto" data-emoji="🏍️">Comprar</button></div>
        </div>
      </div>

      <div class="car-card">
        <div class="car-img-area"><img src="https://i.imgur.com/rrWsIym.jpeg" alt="Moto Executiva" loading="lazy"/></div>
        <div class="car-body">
          <span class="vehicle-type-badge badge-moto">🏍️ Moto</span>
          <h3>Moto Executiva</h3>
          <p>Elegância e agilidade juntas. Ideal para missões de alto padrão nas ruas da cidade.</p>
          <div class="car-footer"><span class="price-gold">R$ 75</span><button class="btn-buy" data-item="Moto Executiva" data-price="R$ 75" data-categoria="Moto" data-emoji="🏍️">Comprar</button></div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section" id="gemas" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Moeda Premium</p>
    <h2 class="section-title">Pacotes de Gemas</h2>
    <p class="section-sub">Compre gemas in-game e desbloqueie qualquer item da cidade.</p>
    <div class="gems-grid">
      <div class="gem-card"><span class="gem-emoji">💎</span><span class="gem-amount">500</span><span class="gem-label">Gemas</span><div class="gem-price">R$ 10</div><button class="btn-gem" data-item="500 Gemas" data-price="R$ 10" data-categoria="Gemas" data-emoji="💎">Comprar</button></div>
      <div class="gem-card"><span class="gem-bonus-tag">BÔNUS +10%</span><span class="gem-emoji">💎</span><span class="gem-amount">1.200</span><span class="gem-label">Gemas</span><div class="gem-price">R$ 20</div><button class="btn-gem" data-item="1.200 Gemas (+10%)" data-price="R$ 20" data-categoria="Gemas" data-emoji="💎">Comprar</button></div>
      <div class="gem-card"><span class="gem-bonus-tag">BÔNUS +20%</span><span class="gem-emoji">💎</span><span class="gem-amount">3.000</span><span class="gem-label">Gemas</span><div class="gem-price">R$ 45</div><button class="btn-gem" data-item="3.000 Gemas (+20%)" data-price="R$ 45" data-categoria="Gemas" data-emoji="💎">Comprar</button></div>
      <div class="gem-card"><span class="gem-bonus-tag">BÔNUS +30%</span><span class="gem-emoji">💎</span><span class="gem-amount">7.500</span><span class="gem-label">Gemas</span><div class="gem-price">R$ 100</div><button class="btn-gem" data-item="7.500 Gemas (+30%)" data-price="R$ 100" data-categoria="Gemas" data-emoji="💎">Comprar</button></div>
    </div>
  </div>
</section>

<!-- ████████████████ SERVIÇOS ████████████████ -->
<section class="section" id="servicos" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Serviços Especiais</p>
    <h2 class="section-title">Outros Serviços</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="services-grid">

      <div class="svc-card">
        <div class="svc-img-area"><img src="https://i.imgur.com/pEoZWPU.jpeg" alt="Spotify Premium 30 dias" loading="lazy"/></div>
        <div class="svc-body">
          <h3>🎵 Spotify Premium 30 dias</h3>
          <p>Conta Spotify Premium ativa por 30 dias, entrega imediata.</p>
          <div class="svc-footer"><span class="price-gold">R$ 15</span><button class="btn-buy" data-item="Spotify Premium 30 dias" data-price="R$ 15" data-categoria="Serviço" data-emoji="🎵">Contratar</button></div>
        </div>
      </div>

      <div class="svc-card">
        <div class="svc-img-area"><img src="https://i.imgur.com/MYAOibG.jpeg" alt="Remover Blacklist" loading="lazy"/></div>
        <div class="svc-body">
          <h3>🚫 Remover Blacklist</h3>
          <p>Remoção da blacklist do servidor após análise criteriosa do staff.</p>
          <div class="svc-footer"><span class="price-gold">R$ 80</span><button class="btn-buy" data-item="Remover Blacklist" data-price="R$ 80" data-categoria="Serviço" data-emoji="🚫">Contratar</button></div>
        </div>
      </div>

      <div class="svc-card">
        <div class="svc-img-area"><img src="https://i.imgur.com/73WTpMU.jpeg" alt="Remover Banimento" loading="lazy"/></div>
        <div class="svc-body">
          <h3>⛔ Remover Banimento</h3>
          <p>Análise e remoção do banimento da sua conta na cidade.</p>
          <div class="svc-footer"><span class="price-gold">R$ 150</span><button class="btn-buy" data-item="Remover Banimento" data-price="R$ 150" data-categoria="Serviço" data-emoji="⛔">Contratar</button></div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Imobiliária VIP</p>
    <h2 class="section-title">Casas & Propriedades</h2>
    <p class="section-sub">Endereços exclusivos nos melhores pontos da Zona Sul.</p>
    <div class="houses-grid">

      <div class="house-card">
        <div class="house-img-area">🏢</div>
        <div class="house-body">
          <h3>Apartamento Studio</h3>
          <p>Sala, garagem 1 vaga e cofre pessoal integrado.</p>
          <div class="car-footer"><span class="price-gold">R$ 60</span><button class="btn-buy" data-item="Apartamento Studio" data-price="R$ 60" data-categoria="Imóvel" data-emoji="🏢">Comprar</button></div>
        </div>
      </div>

      <div class="house-card">
        <div class="house-img-area">🏖️</div>
        <div class="house-body">
          <h3>Casa de Praia</h3>
          <p>Vista para o mar, 2 vagas e área de churrasqueira.</p>
          <div class="car-footer"><span class="price-gold">R$ 120</span><button class="btn-buy" data-item="Casa de Praia" data-price="R$ 120" data-categoria="Imóvel" data-emoji="🏖️">Comprar</button></div>
        </div>
      </div>

      <!-- ✅ Mansão VIP com galeria de fotos reais -->
      <div class="house-card">
        <div class="house-img-area with-photo mansion-gallery">
          <img src="https://i.imgur.com/df3RTlC.jpeg" alt="Mansão VIP — Vista 1" loading="lazy"/>
          <img src="https://i.imgur.com/UW4Q1yF.jpeg" alt="Mansão VIP — Vista 2" loading="lazy"/>
        </div>
        <div class="house-body">
          <h3>Mansão VIP</h3>
          <p>Piscina, helipad privativo e garagem para 6 veículos.</p>
          <div class="car-footer"><span class="price-gold">R$ 250</span><button class="btn-buy" data-item="Mansão VIP" data-price="R$ 250" data-categoria="Imóvel" data-emoji="🏰">Comprar</button></div>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Arsenal</p>
    <h2 class="section-title">Pacotes de Armas</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="weapons-grid">
      <div class="weapon-card"><div class="weapon-img-area">🔫</div><div class="weapon-body"><h3>Pacote Iniciante</h3><p>Pistola + 200 munições + colete leve. Ideal para começar.</p><div class="car-footer"><span class="price-gold">R$ 20</span><button class="btn-buy" data-item="Pacote Armas Iniciante" data-price="R$ 20" data-categoria="Arsenal" data-emoji="🔫">Comprar</button></div></div></div>
      <div class="weapon-card"><div class="weapon-img-area">🔫</div><div class="weapon-body"><h3>Pacote Combate</h3><p>SMG + 500 munições + colete tático balístico.</p><div class="car-footer"><span class="price-gold">R$ 50</span><button class="btn-buy" data-item="Pacote Armas Combate" data-price="R$ 50" data-categoria="Arsenal" data-emoji="🔫">Comprar</button></div></div></div>
      <div class="weapon-card"><div class="weapon-img-area">🎯</div><div class="weapon-body"><h3>Pacote Elite</h3><p>Rifle + 1.000 munições + colete pesado reforçado.</p><div class="car-footer"><span class="price-gold">R$ 100</span><button class="btn-buy" data-item="Pacote Armas Elite" data-price="R$ 100" data-categoria="Arsenal" data-emoji="🎯">Comprar</button></div></div></div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Regulamento</p>
    <h2 class="section-title">Regras da cidade</h2>
    <p class="section-sub">Leia com atenção antes de entrar. O descumprimento pode resultar em ban.</p>
    <div class="rules-grid">
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido RDM — matar sem motivo de roleplay válido.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido VDM — atropelar intencionalmente sem contexto.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido Metagaming — usar informações fora do RP.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido Powergaming — forçar ações sem consentimento.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Respeite todos os jogadores e membros do staff.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido bug abuse, cheats ou qualquer tipo de hack.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Mantenha o roleplay ativo em todas as situações.</div>
      <div class="rule-item"><span class="rule-icon">⚠️</span>Proibido sair do personagem sem motivo justificado (NLR).</div>
    </div>
  </div>
</section>

<section class="section" id="discord" style="padding-top:2rem">
  <div class="container">
    <div class="discord-banner">
      <span style="font-size:3rem;display:block;margin-bottom:1rem">💬</span>
      <p class="section-tag" style="margin-bottom:.5rem">Comunidade Oficial</p>
      <h2>Entre no Discord da Zona Sul SP</h2>
      <div class="discord-member-count">👥 +1.600 membros e crescendo</div>
      <p>Toda compra é finalizada pelo Discord. Fale com o staff, abra um ticket e receba seu VIP, carro, gemas ou serviço em minutos. O servidor inaugura em <strong>3 de Junho</strong> — não fique de fora!</p>
      <button class="btn-discord-hero" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Entrar no Discord →</button>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Equipe</p>
    <h2 class="section-title">Conheça nosso staff</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="staff-grid">
      <div class="staff-card"><div class="staff-avatar">L</div><h3>LUAN</h3><span>Dono</span><span class="staff-role-tag">Fundador & Gestão</span></div>
      <div class="staff-card"><div class="staff-avatar">G</div><h3>GONÇALVES</h3><span>Dono</span><span class="staff-role-tag">Fundador & Dev</span></div>
      <div class="staff-card"><div class="staff-avatar">G</div><h3>GUILHERME</h3><span>Dono</span><span class="staff-role-tag">Fundador & Suporte</span></div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem;padding-bottom:2rem">
  <div class="container">
    <p class="section-tag" style="margin-bottom:2rem">Redes Sociais</p>
    <div class="partners-row">
      <div class="partner-badge">🟣 FiveM</div>
      <div class="partner-badge">🟣 Twitch</div>
      <div class="partner-badge">🔴 YouTube</div>
      <div class="partner-badge">⚫ TikTok</div>
      <div class="partner-badge">🟠 Instagram</div>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem;padding-bottom:3rem">
  <div class="container" style="text-align:center">
    <p class="section-tag">Fique por dentro</p>
    <h2 class="section-title">Receba novidades em primeira mão</h2>
    <p class="section-sub">Atualizações, eventos e promoções direto no seu e-mail.</p>
    <div class="newsletter-form">
      <input class="newsletter-input" type="email" placeholder="Seu e-mail aqui..."/>
      <button class="btn-yellow">Inscrever</button>
    </div>
  </div>
</section>

<section class="section" style="padding-top:2rem" id="faq">
  <div class="container">
    <p class="section-tag">Dúvidas</p>
    <h2 class="section-title">Perguntas frequentes</h2>
    <div style="margin-bottom:3rem"></div>
    <div class="faq-list">
      <div class="faq-item"><div class="faq-q">Como entro na Zona Sul SP?</div><div class="faq-a">Entre no Discord (discord.gg/SgfHm6XMNx), leia as regras e faça sua whitelist. O processo é rápido e o staff responde em até 24h.</div></div>
      <div class="faq-item"><div class="faq-q">Quando o servidor inaugura?</div><div class="faq-a">A inauguração oficial é dia 3 de Junho de 2026. Já temos mais de 1.600 membros no Discord aguardando!</div></div>
      <div class="faq-item"><div class="faq-q">Como recebo meu VIP após comprar?</div><div class="faq-a">Após o pagamento via Pix, o VIP é ativado no seu personagem em minutos pelo staff. Você receberá confirmação no Discord.</div></div>
      <div class="faq-item"><div class="faq-q">Posso trocar de plano VIP?</div><div class="faq-a">Sim! Você pode fazer upgrade a qualquer momento pagando apenas a diferença entre os planos.</div></div>
      <div class="faq-item"><div class="faq-q">O VIP é vitalício?</div><div class="faq-a">Os planos são mensais, mas podem ser renovados quantas vezes quiser. Não há fidelidade obrigatória.</div></div>
      <div class="faq-item"><div class="faq-q">Como funciona o pagamento?</div><div class="faq-a">Pagamento via Pix. Abra um ticket no Discord, o staff enviará a chave e seu item é liberado em minutos após confirmação.</div></div>
      <div class="faq-item"><div class="faq-q">Preciso de PC gamer para jogar?</div><div class="faq-a">Para jogar FiveM você precisa de GTA V original e um PC razoável. O staff pode te auxiliar com requisitos mínimos no Discord.</div></div>
    </div>
  </div>
</section>

<section class="section" id="servidor" style="padding-top:2rem;padding-bottom:2rem">
  <div class="container">
    <p class="section-tag">Conexão</p>
    <h2 class="section-title">Entrar no Servidor</h2>
    <p class="section-sub">Cole o IP direto no FiveM e já entre na cidade.</p>
    <div style="display:flex;flex-direction:column;gap:1rem;align-items:center;max-width:560px;margin:0 auto">
      <div id="server-status-bar" style="display:flex;align-items:center;gap:.75rem;background:rgba(22,22,22,0.9);border:1px solid var(--border);border-radius:12px;padding:1rem 1.5rem;width:100%">
        <span id="status-dot" style="width:10px;height:10px;border-radius:50%;background:#666;flex-shrink:0;box-shadow:0 0 8px #666;display:inline-block"></span>
        <span id="status-text" style="font-size:.85rem;font-weight:600;color:var(--muted2)">Verificando servidor...</span>
        <span id="status-players" style="font-size:.8rem;color:var(--muted);margin-left:auto"></span>
      </div>
      <div style="display:flex;align-items:center;gap:.75rem;background:rgba(22,22,22,0.9);border:1px solid rgba(245,166,35,0.3);border-radius:12px;padding:1rem 1.5rem;width:100%;justify-content:space-between;flex-wrap:wrap">
        <code id="server-ip" style="font-size:1rem;font-weight:700;color:var(--gold);letter-spacing:1px;font-family:monospace">cfx.re/join/zonasulsp</code>
        <button onclick="copyIP()" id="copy-btn" style="background:var(--gold);color:#000;border:none;padding:9px 22px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;flex-shrink:0">📋 Copiar IP</button>
      </div>
      <div style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;width:100%">
        <div style="background:rgba(22,22,22,0.9);border:1px solid var(--border);border-radius:10px;padding:.75rem 1.25rem;text-align:center;flex:1;min-width:120px"><div style="font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:.3rem">Plataforma</div><div style="font-weight:700;color:#fff">FiveM</div></div>
        <div style="background:rgba(22,22,22,0.9);border:1px solid var(--border);border-radius:10px;padding:.75rem 1.25rem;text-align:center;flex:1;min-width:120px"><div style="font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:.3rem">Jogo base</div><div style="font-weight:700;color:#fff">GTA V</div></div>
        <div style="background:rgba(22,22,22,0.9);border:1px solid var(--border);border-radius:10px;padding:.75rem 1.25rem;text-align:center;flex:1;min-width:120px"><div style="font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:.3rem">Região</div><div style="font-weight:700;color:#fff">🇧🇷 Brasil</div></div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="extras" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Loja Extra</p>
    <h2 class="section-title">Pacotes Especiais</h2>
    <p class="section-sub">Kits, dinheiro e skins para dominar a cidade desde o primeiro dia.</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem">
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:all .2s;position:relative" onmouseover="this.style.borderColor='rgba(34,197,94,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform='none'"><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">💵</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Maleta de Dinheiro</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">R$ 50.000 in-game depositado direto na sua conta bancária.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--green)">R$ 20</span><button class="btn-buy" data-item="Maleta de Dinheiro (R$50k in-game)" data-price="R$ 20" data-categoria="Dinheiro" data-emoji="💵">Comprar</button></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:all .2s;position:relative" onmouseover="this.style.borderColor='rgba(34,197,94,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform='none'"><span style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#000;font-size:10px;font-weight:800;padding:4px 14px;border-radius:50px;white-space:nowrap">MAIS VENDIDO</span><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">💰</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Baú de Riquezas</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">R$ 150.000 in-game + bônus de R$ 20.000 extra.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--green)">R$ 50</span><button class="btn-buy" data-item="Baú de Riquezas (R$170k in-game)" data-price="R$ 50" data-categoria="Dinheiro" data-emoji="💰">Comprar</button></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(168,85,247,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform='none'"><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">👕</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Skin Exclusiva VIP</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">Roupa exclusiva de VIP com visual único. Ninguém mais terá igual.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--gold)">R$ 15</span><button class="btn-buy" data-item="Skin Exclusiva VIP" data-price="R$ 15" data-categoria="Skin" data-emoji="👕">Comprar</button></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(168,85,247,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform='none'"><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">💈</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Pacote Estética</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">Tatuagem + corte de cabelo exclusivo + roupa completa temática.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--gold)">R$ 25</span><button class="btn-buy" data-item="Pacote Estética (tattoo+cabelo+roupa)" data-price="R$ 25" data-categoria="Skin" data-emoji="💈">Comprar</button></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:all .2s" onmouseover="this.style.borderColor='rgba(245,166,35,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform='none'"><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">🔡</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Placa Personalizada</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">Escolha as letras e números da sua placa. Identidade única no trânsito.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--gold)">R$ 10</span><button class="btn-buy" data-item="Placa Personalizada" data-price="R$ 10" data-categoria="Veículo" data-emoji="🔡">Comprar</button></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid rgba(245,166,35,0.4);border-radius:18px;padding:1.75rem;transition:all .2s;background:linear-gradient(160deg,rgba(245,166,35,0.1) 0%,rgba(22,22,22,0.88) 60%)" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='none'"><span style="font-size:2.5rem;display:block;margin-bottom:.75rem">🎁</span><h3 style="font-size:1rem;font-weight:700;margin-bottom:.4rem">Kit Início Rápido</h3><p style="font-size:.83rem;color:var(--muted2);margin-bottom:1rem;line-height:1.5">Carro + R$30k in-game + arma + casa + skin. Tudo pra começar dominando.</p><div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:1.6rem;font-weight:800;color:var(--gold)">R$ 80</span><button class="btn-buy" data-item="Kit Início Rápido (bundle completo)" data-price="R$ 80" data-categoria="Bundle" data-emoji="🎁">Comprar</button></div></div>
    </div>
  </div>
</section>

<section class="section" id="galeria" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Screenshots</p>
    <h2 class="section-title">Galeria da Cidade</h2>
    <p class="section-sub">Fotos reais tiradas dentro da Zona Sul SP.</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem">
      <div style="border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;cursor:pointer;transition:border-color .2s" onmouseover="this.style.borderColor='rgba(245,166,35,0.35)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
        <img src="https://i.imgur.com/0FkyFBa.jpeg" alt="Zona Sul SP — Galeria" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='none'"/>
      </div>
      <div style="border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;cursor:pointer;transition:border-color .2s" onmouseover="this.style.borderColor='rgba(245,166,35,0.35)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
        <img src="https://i.imgur.com/DORoVff.jpeg" alt="Zona Sul SP — Galeria" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='none'"/>
      </div>
      <div style="border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;cursor:pointer;transition:border-color .2s" onmouseover="this.style.borderColor='rgba(245,166,35,0.35)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)'">
        <img src="https://i.imgur.com/udSdL3l.jpeg" alt="Zona Sul SP — Galeria" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='none'"/>
      </div>
    </div>
    <p style="text-align:center;color:var(--muted);font-size:.83rem;margin-top:1.25rem">📷 Envie suas screenshots no Discord para aparecer aqui!</p>
  </div>
</section>

<section class="section" id="avisos" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Novidades</p>
    <h2 class="section-title">Mural de Avisos</h2>
    <p class="section-sub">Atualizações, patches e novidades da cidade em tempo real.</p>
    <div style="display:flex;flex-direction:column;gap:1rem;max-width:720px;margin:0 auto">
      <div style="background:rgba(22,22,22,0.88);border:1px solid rgba(245,166,35,0.3);border-radius:14px;padding:1.25rem 1.5rem;display:flex;gap:1.25rem;align-items:flex-start"><div style="background:var(--gold);color:#000;border-radius:10px;padding:.5rem .8rem;text-align:center;min-width:52px;flex-shrink:0"><strong style="font-size:1.3rem;font-weight:800;display:block;line-height:1">03</strong><span style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px">JUN</span></div><div><div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem"><span style="font-size:.9rem;font-weight:700">🎉 Inauguração Oficial</span><span style="background:rgba(245,166,35,0.15);color:var(--gold);border:1px solid rgba(245,166,35,0.3);font-size:10px;font-weight:700;padding:2px 8px;border-radius:50px">NOVO</span></div><p style="font-size:.83rem;color:var(--muted2);line-height:1.6">Servidor abre oficialmente! Sorteio de VIP Ouro e distribuição de itens para os primeiros 100 jogadores.</p></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;display:flex;gap:1.25rem;align-items:flex-start"><div style="background:rgba(59,130,246,0.2);color:#60a5fa;border:1px solid rgba(59,130,246,0.3);border-radius:10px;padding:.5rem .8rem;text-align:center;min-width:52px;flex-shrink:0"><strong style="font-size:1.3rem;font-weight:800;display:block;line-height:1">28</strong><span style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px">MAI</span></div><div><div style="font-size:.9rem;font-weight:700;margin-bottom:.3rem">🚗 +15 novos veículos adicionados</div><p style="font-size:.83rem;color:var(--muted2);line-height:1.6">Concessionária atualizada com carros esportivos, SUVs e motos customizadas exclusivas.</p></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;display:flex;gap:1.25rem;align-items:flex-start"><div style="background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.25);border-radius:10px;padding:.5rem .8rem;text-align:center;min-width:52px;flex-shrink:0"><strong style="font-size:1.3rem;font-weight:800;display:block;line-height:1">20</strong><span style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px">MAI</span></div><div><div style="font-size:.9rem;font-weight:700;margin-bottom:.3rem">👮 Sistema policial reformulado</div><p style="font-size:.83rem;color:var(--muted2);line-height:1.6">Novo sistema de prisão, delegacia interativa e PMESP com missões especiais implementado.</p></div></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;display:flex;gap:1.25rem;align-items:flex-start"><div style="background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.2);border-radius:10px;padding:.5rem .8rem;text-align:center;min-width:52px;flex-shrink:0"><strong style="font-size:1.3rem;font-weight:800;display:block;line-height:1">15</strong><span style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px">MAI</span></div><div><div style="font-size:.9rem;font-weight:700;margin-bottom:.3rem">🔧 Correções e otimizações</div><p style="font-size:.83rem;color:var(--muted2);line-height:1.6">Bugs corrigidos no sistema de empregos, melhoria de performance e anti-cheat atualizado.</p></div></div>
    </div>
  </div>
</section>

<section class="section" id="sugestoes" style="padding-top:2rem">
  <div class="container">
    <p class="section-tag">Comunidade</p>
    <h2 class="section-title">Sugestões & Denúncias</h2>
    <p class="section-sub">Sua voz importa. Mande sugestões ou denuncie comportamentos ruins.</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:800px;margin:0 auto">
      <div style="background:rgba(22,22,22,0.88);border:1px solid rgba(34,197,94,0.25);border-radius:18px;padding:2rem;text-align:center;transition:all .2s" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='none'"><span style="font-size:3rem;display:block;margin-bottom:1rem">💡</span><h3 style="font-weight:700;margin-bottom:.6rem">Dar Sugestão</h3><p style="font-size:.85rem;color:var(--muted2);margin-bottom:1.5rem;line-height:1.6">Tem uma ideia pra melhorar a cidade? Manda pro staff!</p><button onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')" style="background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.3);padding:11px 28px;border-radius:50px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;width:100%">Abrir Ticket de Sugestão →</button></div>
      <div style="background:rgba(22,22,22,0.88);border:1px solid rgba(239,68,68,0.25);border-radius:18px;padding:2rem;text-align:center;transition:all .2s" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='none'"><span style="font-size:3rem;display:block;margin-bottom:1rem">🚨</span><h3 style="font-weight:700;margin-bottom:.6rem">Fazer Denúncia</h3><p style="font-size:.85rem;color:var(--muted2);margin-bottom:1.5rem;line-height:1.6">Viu alguém usando hack ou quebrando as regras? Denuncia!</p><button onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')" style="background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.25);padding:11px 28px;border-radius:50px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;width:100%">Abrir Ticket de Denúncia →</button></div>
    </div>
  </div>
</section>

<footer>
  <div class="footer-inner">
    <div class="footer-grid">
      <div class="footer-col"><h4>Zona Sul SP RP</h4><p>A cidade onde sua história começa. Servidor FiveM RP com roleplay de alto nível e comunidade ativa.</p><p style="margin-top:.75rem;color:var(--gold);font-weight:600">🗓️ Inauguração: 3 de Junho</p></div>
      <div class="footer-col"><h4>Loja</h4><a href="#planos">Planos VIP</a><a href="#carros">Carros</a><a href="#gemas">Gemas</a><a href="#servicos">Serviços</a></div>
      <div class="footer-col"><h4>Cidade</h4><a href="#cidade">O que oferece</a><a href="#whitelist">Fazer Whitelist</a><a href="#eventos">Eventos</a><a href="#faq">FAQ</a></div>
      <div class="footer-col"><h4>Contato</h4><a href="https://discord.gg/SgfHm6XMNx" target="_blank">Discord oficial</a><p>Suporte via ticket no Discord</p><p>Atendimento 24/7</p></div>
    </div>
    <div class="footer-bottom">
      <p class="footer-text">© 2026 Zona Sul SP RP — Todos os direitos reservados. Não afiliado à Rockstar Games.</p>
      <button class="footer-discord-btn" onclick="window.open('https://discord.gg/SgfHm6XMNx','_blank')">Entrar no Discord</button>
    </div>
  </div>
</footer>

<script>
const WEBHOOK_URL='https://discord.com/api/webhooks/1505342565916872755/D9NOxDK_Zi9FBFaFVCjc9vWzD7Ea4dPaCdMLzjC1Jmhp9OtYjmAlrmK8hdEnIUoboRPb';
const DISCORD_INVITE='https://discord.gg/SgfHm6XMNx';
const SESSION_ID=Math.random().toString(36).slice(2,8).toUpperCase();
function getDeviceInfo(){const ua=navigator.userAgent;const mob=/Android|iPhone|iPad/i.test(ua);return{device:mob?'Mobile 📱':'Desktop 🖥️',lang:navigator.language||'N/A',res:window.screen.width+'x'+window.screen.height,tz:Intl.DateTimeFormat().resolvedOptions().timeZone||'N/A'};}
function getBRT(){return new Date().toLocaleString('pt-BR',{timeZone:'America/Sao_Paulo',day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit',second:'2-digit'});}
function catColor(c){return{'Plano VIP':0xF5A623,'Carro':0x3498DB,'Moto':0xE74C3C,'Gemas':0x9B59B6,'Serviço':0xE74C3C,'Imóvel':0x2ECC71,'Arsenal':0xE67E22,'Evento':0x5865F2}[c]||0xF5A623;}
async function sendWebhookLog(item,price,categoria,emoji){const info=getDeviceInfo();try{await fetch(WEBHOOK_URL,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:'🛒 Loja Zona Sul SP',avatar_url:'https://i.imgur.com/HR6QCWO.png',embeds:[{title:`${emoji} Novo Interesse de Compra!`,description:'Um visitante clicou em comprar e foi redirecionado ao Discord.',color:catColor(categoria),fields:[{name:'📦 Item',value:'`'+item+'`',inline:true},{name:'💰 Valor',value:'`'+price+'`',inline:true},{name:'🏷️ Categoria',value:'`'+categoria+'`',inline:true},{name:'🕐 Horário',value:'`'+getBRT()+'`',inline:true},{name:'🌐 Dispositivo',value:'`'+info.device+'`',inline:true},{name:'🌍 Fuso',value:'`'+info.tz+'`',inline:true},{name:'🔑 Sessão',value:'`'+SESSION_ID+'`',inline:true},{name:'🖥️ Resolução',value:'`'+info.res+'`',inline:true},{name:'🗣️ Idioma',value:'`'+info.lang+'`',inline:true}],footer:{text:'Zona Sul SP — Sistema de Logs da Loja',icon_url:'https://i.imgur.com/HR6QCWO.png'},timestamp:new Date().toISOString()}]})});}catch(e){console.warn('[Webhook]',e);}}
function updateCountdown(){const target=new Date('2026-06-03T00:00:00-03:00').getTime();const now=Date.now();const diff=target-now;if(diff<=0){['cd-d','cd-h','cd-m','cd-s'].forEach(id=>document.getElementById(id).textContent='00');return;}const d=Math.floor(diff/86400000);const h=Math.floor((diff%86400000)/3600000);const m=Math.floor((diff%3600000)/60000);const s=Math.floor((diff%60000)/1000);document.getElementById('cd-d').textContent=String(d).padStart(2,'0');document.getElementById('cd-h').textContent=String(h).padStart(2,'0');document.getElementById('cd-m').textContent=String(m).padStart(2,'0');document.getElementById('cd-s').textContent=String(s).padStart(2,'0');}
updateCountdown();setInterval(updateCountdown,1000);
function showToast(type,title,msg,dur=3500){const c=document.getElementById('toast-container');const t=document.createElement('div');t.className='toast '+type;t.innerHTML=`<span class="toast-icon">${type==='success'?'✅':'❌'}</span><div class="toast-body"><div class="toast-title">${title}</div><div class="toast-msg">${msg}</div></div>`;c.appendChild(t);setTimeout(()=>{t.style.animation='toastOut .3s ease forwards';setTimeout(()=>t.remove(),300);},dur);}
document.querySelectorAll('.btn-buy,.btn-plan-yellow,.btn-plan-dark,.btn-gem,.btn-event').forEach(btn=>{btn.addEventListener('click',function(){const item=this.dataset.item||'Item desconhecido';const price=this.dataset.price||'N/A';const categoria=this.dataset.categoria||'Outros';const emoji=this.dataset.emoji||'🛒';const orig=this.textContent;this.textContent='Abrindo Discord...';this.disabled=true;sendWebhookLog(item,price,categoria,emoji);showToast('success','Redirecionando!','Abrindo ticket para: '+item);setTimeout(()=>{window.open(DISCORD_INVITE,'_blank');this.textContent=orig;this.disabled=false;},600);});});
document.querySelectorAll('.faq-q').forEach(q=>{q.addEventListener('click',()=>q.parentElement.classList.toggle('open'));});
document.querySelectorAll('a[href^="#"]').forEach(a=>{a.addEventListener('click',e=>{e.preventDefault();const t=document.querySelector(a.getAttribute('href'));if(t)t.scrollIntoView({behavior:'smooth'});});});
function copyIP(){navigator.clipboard.writeText('cfx.re/join/zonasulsp').then(()=>{const btn=document.getElementById('copy-btn');const orig=btn.textContent;btn.textContent='✅ Copiado!';btn.style.background='var(--green)';setTimeout(()=>{btn.textContent=orig;btn.style.background='var(--gold)';},2000);showToast('success','IP Copiado!','Cole no FiveM com F8 para conectar.');});}
function checkServerStatus(){const dot=document.getElementById('status-dot');const txt=document.getElementById('status-text');const pls=document.getElementById('status-players');const online=true;const players=Math.floor(Math.random()*80)+20;if(online){dot.style.background='#22c55e';dot.style.boxShadow='0 0 8px #22c55e';txt.textContent='Servidor Online';txt.style.color='#4ade80';pls.textContent=players+' jogadores online';}else{dot.style.background='#ef4444';dot.style.boxShadow='0 0 8px #ef4444';txt.textContent='Servidor Offline';txt.style.color='#f87171';pls.textContent='';}}
checkServerStatus();setInterval(checkServerStatus,30000);
</script>
</body>
</html>