/* ============================================
   ZIRO13 Home V2 — Elegant Premium Dark
   All fixes applied
   ============================================ */

/* ── Reset ── */
.hero-section,.about-section,.services-section,.flow-section,
.faq-section,.testimonial-section,.official-links-section,
.support-section,.cta-section,.stats-section,.trust-bar,
.recent-downloads-section { all: revert; }

:root {
    --z-bg: #000; --z-bg-card: #0E0E0E; --z-bg-card2: #111;
    --z-border: rgba(255,255,255,0.07); --z-border-hover: rgba(255,255,255,0.14);
    --z-text: #fff; --z-text-sub: rgba(255,255,255,0.5); --z-text-muted: rgba(255,255,255,0.28);
    --z-radius: 10px; --z-max: 1040px;
    --z-ease: cubic-bezier(0.16,1,0.3,1);
}

body { background: var(--z-bg); color: var(--z-text); font-family: -apple-system,BlinkMacSystemFont,'Inter',sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
*,*::before,*::after { box-sizing: border-box; }
main { padding-top: 0; }

/* ── Loader ── */
#z-loader { position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity 0.5s var(--z-ease),visibility 0.5s; }
#z-loader.done { opacity:0;visibility:hidden;pointer-events:none; }
.z-loader-logo { width:46px;height:46px;object-fit:contain;animation:logo-spin 1.5s cubic-bezier(0.65,0,0.35,1) infinite; }
@keyframes logo-spin { 0%{transform:rotate(0deg) scale(1);opacity:.6} 50%{transform:rotate(180deg) scale(.88);opacity:1} 100%{transform:rotate(360deg) scale(1);opacity:.6} }
.z-loader-bar { width:90px;height:1px;background:rgba(255,255,255,0.07);border-radius:99px;overflow:hidden; }
.z-loader-bar-fill { height:100%;width:0%;background:rgba(255,255,255,0.55);border-radius:99px;transition:width 0.25s var(--z-ease); }

/* ── Progress bar ── */
#z-progress { position:fixed;top:0;left:0;right:0;z-index:9998;height:2px;pointer-events:none; }
#z-progress-bar { height:100%;width:0%;background:rgba(255,255,255,0.5);transition:width .2s ease,opacity .3s ease;opacity:0; }
#z-progress.active #z-progress-bar { opacity:1; }

/* ── Scroll reveal ── */
[data-reveal] { opacity:0;transform:translateY(20px);transition:opacity .6s var(--z-ease),transform .6s var(--z-ease); }
[data-reveal].vis { opacity:1;transform:none; }
[data-reveal-delay="1"] { transition-delay:.08s; }
[data-reveal-delay="2"] { transition-delay:.16s; }
[data-reveal-delay="3"] { transition-delay:.24s; }
[data-reveal-delay="4"] { transition-delay:.32s; }
[data-reveal-delay="5"] { transition-delay:.40s; }
[data-reveal-delay="6"] { transition-delay:.48s; }

/* ── Announcement ── */
.promotion-region { max-width:var(--z-max);margin:0 auto;padding:80px 24px 0; }
.promotion-region:empty { display:none; }
.promotion-banner { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin-bottom:8px;border:1px solid var(--z-border);border-radius:6px;background:rgba(255,255,255,0.025);font-size:13px; }
.promotion-banner-label { font-size:10px;font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px; }
.promotion-banner h2 { font-size:13px;font-weight:500;color:rgba(255,255,255,0.65);margin:0 0 2px; }
.promotion-banner p { font-size:12px;color:var(--z-text-muted);margin:0; }
.promotion-banner a { font-size:12px;color:rgba(255,255,255,0.45);border:1px solid var(--z-border);padding:4px 12px;border-radius:5px;text-decoration:none;white-space:nowrap;transition:all .15s;flex-shrink:0; }
.promotion-banner a:hover { border-color:var(--z-border-hover);color:rgba(255,255,255,0.75); }

/* ── Layout ── */
.z-wrap { max-width:var(--z-max);margin:0 auto;padding:0 24px; }
.z-divider { height:1px;background:var(--z-border);max-width:var(--z-max);margin:0 auto; }
.z-section { padding:100px 24px;max-width:var(--z-max);margin:0 auto; }
.z-section-head { margin-bottom:44px; }
.z-section-label { font-size:10px;font-weight:600;color:rgba(255,255,255,0.22);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:10px; }
.z-section-title { font-size:clamp(22px,3.5vw,30px);font-weight:700;letter-spacing:-.8px;color:rgba(255,255,255,.88);line-height:1.15; }
.z-section-title em { font-style:normal;color:rgba(255,255,255,.2); }
.z-section-sub { font-size:14px;color:var(--z-text-muted);margin-top:8px;line-height:1.65; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 160px 24px 100px;
    overflow: hidden;
}

/* subtle radial glow */
.hero-section::before {
    content:''; position:absolute; top:-10%; left:50%; transform:translateX(-50%);
    width:700px; height:500px; pointer-events:none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.035) 0%, transparent 65%);
}

/* grid overlay */
.hero-section::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 80%);
}

/* canvas lines behind content */
.hero-bg-lines { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; }
.hero-bg-lines canvas { position:absolute;inset:0;width:100%;height:100%;opacity:.12; }

.hero-inner { position:relative;z-index:1;max-width:720px;margin:0 auto;transform:translateY(-28px); }

.hero-eyebrow {
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.1em;text-transform:uppercase;
    padding:6px 16px;border:1px solid rgba(255,255,255,.07);border-radius:99px;
    background:rgba(255,255,255,.02);margin-bottom:36px;
    animation:hi .7s var(--z-ease) both;
}
.hero-eyebrow-dot { width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);animation:db 2s ease-in-out infinite; }
@keyframes db { 0%,100%{opacity:.35}50%{opacity:1} }

.hero-title {
    font-size: clamp(42px,8vw,80px);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1.01;
    color: #fff;
    margin: 0 0 28px;
    animation: hi .7s var(--z-ease) .1s both;
}
.hero-title em { font-style:normal;color:rgba(255,255,255,.18); }

.hero-desc {
    font-size: clamp(15px,2vw,17px);
    color: rgba(255,255,255,.42);
    line-height: 1.78;
    max-width: 460px;
    margin: 0 auto 48px;
    animation: hi .7s var(--z-ease) .18s both;
}
.hero-desc strong { color:rgba(255,255,255,.72);font-weight:500; }

@keyframes hi { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* CTA buttons */
.hero-cta {
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    margin-bottom:72px;
    animation:hi .7s var(--z-ease) .26s both;
}

.btn-hero-primary {
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;color:#000;
    background:#fff;padding:12px 28px;border-radius:8px;
    text-decoration:none;letter-spacing:.01em;
    transition:opacity .15s,transform .15s;
    box-shadow:0 1px 0 rgba(255,255,255,0.15) inset;
}
.btn-hero-primary:hover { opacity:.86;transform:translateY(-1px); }
.btn-hero-primary i { font-size:15px; }

.btn-hero-secondary {
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;color:rgba(255,255,255,.45);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    padding:12px 24px;border-radius:8px;
    text-decoration:none;transition:all .15s;
}
.btn-hero-secondary:hover { background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.78); }
.btn-hero-secondary i { font-size:14px; }

/* Stats — elegant, no card */
.hero-stats {
    display:inline-flex;gap:0;
    animation:hi .7s var(--z-ease) .34s both;
}

.hero-stat {
    padding:0 40px;
    text-align:center;
    position:relative;
}
.hero-stat::after {
    content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:1px;height:32px;background:rgba(255,255,255,.08);
}
.hero-stat:last-child::after { display:none; }

.hero-stat-num {
    display:block;
    font-size:28px;font-weight:700;letter-spacing:-1px;color:#fff;line-height:1;margin-bottom:6px;
}
.hero-stat-label {
    display:block;font-size:11px;color:rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.08em;
}

/* ══════════════════════════════════════
   TRUST BAR
══════════════════════════════════════ */
.z-trust { border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap; }
.z-trust-lbl { font-size:10px;color:rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.1em; }
.z-trust-div { width:1px;height:10px;background:rgba(255,255,255,.07); }
.z-trust-item { font-size:11px;color:rgba(255,255,255,.22);display:flex;align-items:center;gap:5px; }
.z-trust-item i { font-size:12px; }

/* ══════════════════════════════════════
   FEATURE CARDS — with real effects
══════════════════════════════════════ */
.z-feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }

.z-feature-card {
    background:var(--z-bg-card);
    border:1px solid var(--z-border);
    border-radius:var(--z-radius);
    display:flex;flex-direction:column;
    transition:border-color .25s,background .25s,transform .25s;
    overflow:hidden;
    position:relative;
}
.z-feature-card:hover {
    background:var(--z-bg-card2);
    border-color:var(--z-border-hover);
    transform:translateY(-3px);
}
/* glow on hover */
.z-feature-card::before {
    content:'';position:absolute;inset:0;border-radius:var(--z-radius);
    background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.04) 0%, transparent 60%);
    opacity:0;transition:opacity .3s;pointer-events:none;z-index:0;
}
.z-feature-card:hover::before { opacity:1; }

.z-feature-visual {
    height:150px;background:#080808;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--z-border);
    overflow:hidden;position:relative;z-index:1;
}

/* pattern animations */
.z-fv-grid::after {
    content:'';position:absolute;inset:-50%;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:28px 28px;
    animation:grid-move 12s linear infinite;
}
.z-fv-dots::after {
    content:'';position:absolute;inset:-50%;
    background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:22px 22px;
    animation:dots-move 14s linear infinite;
}
.z-fv-lines::after {
    content:'';position:absolute;inset:-100%;
    background-image:repeating-linear-gradient(135deg,transparent,transparent 14px,rgba(255,255,255,.04) 14px,rgba(255,255,255,.04) 15px);
    animation:lines-move 8s linear infinite;
}
@keyframes grid-move  { to { transform:translate(28px,28px); } }
@keyframes dots-move  { to { transform:translate(22px,22px); } }
@keyframes lines-move { to { transform:translate(30px,30px); } }

.z-feature-visual-icon {
    font-size:28px;color:rgba(255,255,255,.18);
    position:relative;z-index:1;
    animation:icon-float 4s ease-in-out infinite;
}
@keyframes icon-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.z-feature-body { padding:22px 22px 26px;flex:1;position:relative;z-index:1; }
.z-feature-title { font-size:14px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:7px;letter-spacing:-.1px; }
.z-feature-desc { font-size:12px;color:rgba(255,255,255,.26);line-height:1.68; }

/* ══════════════════════════════════════
   PLATFORM CARDS
══════════════════════════════════════ */
.z-platform-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.z-platform-card { background:var(--z-bg-card);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:32px;text-decoration:none;display:block;transition:background .2s,border-color .2s,transform .2s; }
.z-platform-card:hover { background:var(--z-bg-card2);border-color:var(--z-border-hover);transform:translateY(-2px); }
.z-platform-icon { width:40px;height:40px;border:1px solid var(--z-border);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:18px; }
.z-platform-icon i { font-size:20px;color:rgba(255,255,255,.3); }
.z-platform-name { font-size:16px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:8px; }
.z-platform-desc { font-size:13px;color:rgba(255,255,255,.28);line-height:1.65;margin-bottom:18px; }
.z-platform-tags { display:flex;gap:5px;flex-wrap:wrap; }
.z-platform-tag { font-size:10px;color:rgba(255,255,255,.2);border:1px solid var(--z-border);padding:2px 8px;border-radius:4px; }

/* ══════════════════════════════════════
   PRODUCT CARDS — dengan rating & likes
══════════════════════════════════════ */
.z-showcase-header { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px; }
.z-view-all { font-size:13px;color:var(--z-text-muted);text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .15s; }
.z-view-all:hover { color:rgba(255,255,255,.6); }
.z-view-all i { font-size:12px; }

.z-product-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }

.z-product-card {
    background:var(--z-bg-card);border:1px solid var(--z-border);border-radius:var(--z-radius);
    text-decoration:none;display:block;
    transition:background .2s,border-color .2s,transform .25s;
    overflow:hidden;
}
.z-product-card:hover { background:var(--z-bg-card2);border-color:var(--z-border-hover);transform:translateY(-3px); }

.z-product-thumb { aspect-ratio:16/9;background:#080808;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.z-product-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .4s var(--z-ease); }
.z-product-card:hover .z-product-thumb img { transform:scale(1.05); }
.z-product-thumb-icon { font-size:28px;color:rgba(255,255,255,.06); }

.z-prod-badge { position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em; }
.z-badge-free { background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.07); }
.z-badge-premium { background:rgba(200,160,50,.1);color:#A88930;border:1px solid rgba(200,160,50,.14); }
.z-badge-hot { background:rgba(210,70,70,.1);color:#A85050;border:1px solid rgba(210,70,70,.14); }

.z-product-body { padding:14px 16px 16px; }
.z-product-platform { font-size:10px;color:rgba(255,255,255,.18);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px; }
.z-product-name { font-size:13px;font-weight:500;color:rgba(255,255,255,.62);line-height:1.35;margin-bottom:12px; }

.z-product-foot { display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid rgba(255,255,255,.05); }
.z-product-price { font-size:12px;color:rgba(255,255,255,.28); }
.z-product-price.free { color:rgba(255,255,255,.5); }

.z-product-meta { display:flex;align-items:center;gap:10px; }
.z-product-stat { font-size:11px;color:rgba(255,255,255,.18);display:flex;align-items:center;gap:3px; }
.z-product-stat i { font-size:11px; }
.z-product-stat i.ti-star::before { content:"★"; font-size:11px; color:rgba(200,160,50,.9); }
.z-product-stat i.ti-star { font-size:0 !important; }
/* hide download icon for premium */
.z-product-card.premium .z-stat-dl { display:none; }

/* ══════════════════════════════════════
   FLOW GRID
══════════════════════════════════════ */
.z-flow-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.z-flow-step { background:var(--z-bg-card);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:24px;transition:background .2s,border-color .2s; }
.z-flow-step:hover { background:var(--z-bg-card2);border-color:var(--z-border-hover); }
.z-flow-num { font-size:10px;font-weight:500;color:rgba(255,255,255,.12);letter-spacing:.1em;margin-bottom:12px; }
.z-flow-title { font-size:13px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:6px; }
.z-flow-desc { font-size:12px;color:rgba(255,255,255,.22);line-height:1.65; }

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.z-testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px; }
.z-testi-card { background:var(--z-bg-card);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:24px;transition:border-color .2s; }
.z-testi-card:hover { border-color:var(--z-border-hover); }
.z-testi-stars { display:flex;gap:2px;margin-bottom:14px; }
.z-testi-stars i { font-size:0 !important; }
.z-testi-stars i::before { content:"★"; font-size:14px; color:rgba(200,160,50,.9); }
.z-testi-text { font-size:13px;color:rgba(255,255,255,.38);line-height:1.75;margin-bottom:16px;font-style:italic; }
.z-testi-author { display:flex;align-items:center;gap:9px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05); }
.z-testi-avatar { width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--z-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.35);flex-shrink:0; }
.z-testi-name { font-size:12px;font-weight:500;color:rgba(255,255,255,.42); }
.z-testi-role { font-size:10px;color:rgba(255,255,255,.2);margin-top:1px; }

/* ══════════════════════════════════════
   COMMUNITY
══════════════════════════════════════ */
.z-community-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px; }
.z-community-card { background:var(--z-bg-card);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,background .2s,transform .2s; }
.z-community-card:hover { background:var(--z-bg-card2);border-color:var(--z-border-hover);transform:translateY(-2px); }
.z-community-icon { width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--z-border);display:flex;align-items:center;justify-content:center; }
.z-community-icon i { font-size:18px;color:rgba(255,255,255,.45) !important; }
.z-community-icon .brand-roblox,
.brand-roblox { color:rgba(255,255,255,.45) !important; }
.brand-roblox-bg { background:rgba(255,255,255,.05) !important;border-color:var(--z-border) !important; }
.z-community-name { font-size:13px;font-weight:500;color:rgba(255,255,255,.55); }
.z-community-desc { font-size:11px;color:rgba(255,255,255,.2);line-height:1.5;margin-top:-2px; }
.z-community-arrow { font-size:12px;color:rgba(255,255,255,.12);margin-top:auto; }

/* Official links premium polish */
#official-links .z-community-grid { perspective: 900px; }
#official-links .z-community-card {
    position: relative;
    overflow: hidden;
    min-height: 158px;
    isolation: isolate;
    animation: official-card-float 7s ease-in-out infinite;
}
#official-links .z-community-card:nth-child(2n) { animation-delay: -1.4s; }
#official-links .z-community-card:nth-child(3n) { animation-delay: -2.8s; }
#official-links .z-community-card::before {
    content: "";
    position: absolute;
    inset: -40% -80%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08), transparent 65%);
    transform: translateX(-40%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: -1;
}
#official-links .z-community-card:hover::before {
    opacity: 1;
    animation: official-card-sheen 1.2s ease forwards;
}
#official-links .z-community-card:hover .z-community-arrow {
    color: rgba(255,255,255,.55);
    transform: translate(2px,-2px);
}
#official-links .z-community-icon {
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
#official-links .z-community-card:hover .z-community-icon {
    transform: translateY(-2px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}
@keyframes official-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes official-card-sheen {
    to { transform: translateX(40%); }
}
@media (prefers-reduced-motion: reduce) {
    #official-links .z-community-card,
    #official-links .z-community-card:hover::before { animation: none !important; }
}

/* Final home CTA polish: neutral hover/click */
.btn-hero-primary,
.z-cta-btn-p {
    position: relative;
    overflow: hidden;
    background: #fff !important;
    color: #050505 !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    box-shadow: 0 14px 34px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.55) !important;
    transition: transform .18s var(--z-ease), box-shadow .18s var(--z-ease), background .18s var(--z-ease) !important;
}
.btn-hero-primary::before,
.z-cta-btn-p::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(0,0,0,.06) 45%, transparent 68%);
    transform: translateX(-120%);
    transition: transform .55s var(--z-ease);
    pointer-events: none;
}
.btn-hero-primary:hover,
.z-cta-btn-p:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
    background: rgba(255,255,255,.94) !important;
    color: #000 !important;
    box-shadow: 0 18px 45px rgba(255,255,255,.09), 0 12px 36px rgba(0,0,0,.35) !important;
}
.btn-hero-primary:hover::before,
.z-cta-btn-p:hover::before {
    transform: translateX(120%);
}
.btn-hero-primary:active,
.z-cta-btn-p:active {
    transform: translateY(0) scale(.985) !important;
}
.btn-hero-secondary,
.z-cta-btn-s {
    color: rgba(255,255,255,.58) !important;
    border-color: rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.035) !important;
}
.btn-hero-secondary:hover,
.z-cta-btn-s:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,.24) !important;
    background: rgba(255,255,255,.075) !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   TECHNOLOGY STACK
══════════════════════════════════════ */
.z-section-desc {
    max-width: 560px;
    margin: 14px auto 0;
    color: rgba(255,255,255,.34);
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
}
.z-tech-grid {
    margin: 34px auto 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}
.z-tech-card {
    position: relative;
    min-height: 112px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,.68);
    overflow: hidden;
    transition: transform .2s var(--z-ease),border-color .2s var(--z-ease),background .2s var(--z-ease);
}
.z-tech-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 58%);
    opacity: 0;
    transition: opacity .2s var(--z-ease);
}
.z-tech-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.055);
}
.z-tech-card:hover::before { opacity: 1; }
.z-tech-card i {
    position: relative;
    font-size: 28px;
    color: rgba(255,255,255,.82);
}
.z-tech-card span {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.z-faq-list { max-width:880px;margin:34px auto 0;display:grid;gap:12px; }
.z-faq-item {
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    background:rgba(255,255,255,.025);
    overflow:hidden;
    transition:border-color .2s var(--z-ease),background .2s var(--z-ease),transform .2s var(--z-ease);
}
.z-faq-item:hover {
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
}
.z-faq-btn { width:100%;background:none;border:none;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;text-align:left;transition:background .15s; }
.z-faq-btn:hover { background:transparent; }
.z-faq-btn span { font-size:14px;font-weight:650;color:rgba(255,255,255,.72);line-height:1.45; }
.z-faq-icon {
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:rgba(255,255,255,.38);
    flex-shrink:0;
    transition:transform .25s var(--z-ease),border-color .2s var(--z-ease),color .2s var(--z-ease);
}
.z-faq-item.open {
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.045);
}
.z-faq-item.open .z-faq-icon { transform:rotate(180deg);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75); }
.z-faq-body { max-height:0;overflow:hidden;transition:max-height .35s var(--z-ease); }
.z-faq-item.open .z-faq-body { max-height:240px; }
.z-faq-answer { padding:0 24px 24px;font-size:13px;color:rgba(255,255,255,.42);line-height:1.8;max-width:760px; }

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.z-cta-wrap { text-align:center;padding:100px 24px;border-top:1px solid var(--z-border); }
.z-cta-logo { width:40px;height:40px;object-fit:contain;margin:0 auto 20px;display:block;opacity:.5; }
.z-cta-title { font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-1.4px;color:rgba(255,255,255,.85);margin-bottom:10px; }
.z-cta-title em { font-style:normal;color:rgba(255,255,255,.18); }
.z-cta-sub { font-size:14px;color:var(--z-text-muted);margin:0 auto 32px;line-height:1.7;max-width:360px; }
.z-cta-btns { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.z-cta-btn-p { font-size:13px;font-weight:600;color:#000;background:rgba(255,255,255,.9);padding:11px 24px;border-radius:8px;text-decoration:none;transition:opacity .15s;display:inline-flex;align-items:center;gap:6px; }
.z-cta-btn-p:hover { opacity:.85; }
.z-cta-btn-s { font-size:13px;color:var(--z-text-sub);padding:11px 20px;border:1px solid var(--z-border);border-radius:8px;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px; }
.z-cta-btn-s:hover { border-color:var(--z-border-hover);color:rgba(255,255,255,.7); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { border-top:1px solid var(--z-border);padding:52px 24px 36px;max-width:var(--z-max);margin:0 auto; }
.footer-content { display:grid;grid-template-columns:200px 1fr;gap:52px;margin-bottom:36px; }
.footer-brand img { width:32px;height:32px;object-fit:contain;display:block;margin-bottom:8px; }
.footer-brand h3 { font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:4px; }
.footer-brand p { font-size:12px;color:rgba(255,255,255,.18);margin-bottom:16px; }
.social-links { display:flex;gap:7px; }
.social-link { width:30px;height:30px;border:1px solid var(--z-border);border-radius:6px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);text-decoration:none;transition:all .15s; }
.social-link:hover { border-color:var(--z-border-hover);color:rgba(255,255,255,.55); }
.social-link i { font-size:14px; }
.footer-links { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.footer-column h4 { font-size:10px;font-weight:600;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px; }
.footer-column a { display:block;font-size:13px;color:rgba(255,255,255,.2);text-decoration:none;margin-bottom:9px;transition:color .15s; }
.footer-column a:hover { color:rgba(255,255,255,.5); }
.footer-bottom { padding-top:24px;border-top:1px solid var(--z-border);display:flex;align-items:center;justify-content:space-between; }
.footer-bottom p { font-size:12px;color:rgba(255,255,255,.14); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-section { padding:120px 20px 80px; }
    .hero-inner { transform:translateY(-14px); }
    .hero-title { letter-spacing:-2px; }
    .hero-stat { padding:0 22px; }
    .hero-stat-num { font-size:22px; }
    .z-section { padding:72px 20px; }
    .z-feature-grid { grid-template-columns:1fr; }
    .z-platform-grid { grid-template-columns:1fr; }
    .z-product-grid { grid-template-columns:repeat(2,1fr); }
    .z-flow-grid { grid-template-columns:repeat(2,1fr); }
    .z-testi-grid { grid-template-columns:1fr; }
    .z-community-grid { grid-template-columns:repeat(2,1fr); }
    .z-tech-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
    .z-tech-card { min-height:94px;border-radius:14px; }
    .z-faq-list { gap:10px;margin-top:28px; }
    .z-faq-btn { padding:18px; }
    .z-faq-answer { padding:0 18px 20px; }
    .footer-content { grid-template-columns:1fr;gap:28px; }
    .footer-links { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px) {
    .hero-title { letter-spacing:-1.5px; }
    .hero-cta { flex-direction:column;align-items:center; }
    .hero-stats { flex-direction:column;gap:16px; }
    .hero-stat::after { display:none; }
    .hero-stat { padding:0; }
    .z-product-grid { grid-template-columns:1fr; }
    .z-flow-grid { grid-template-columns:1fr; }
    .z-community-grid { grid-template-columns:repeat(2,1fr); }
    .footer-links { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column;gap:8px;text-align:center; }
    .z-cta-btns { flex-direction:column;align-items:center; }
}

/* ══════════════════════════════════════
   TESTIMONIAL SLIDER
══════════════════════════════════════ */
.z-testi-slider-wrap {
    overflow: hidden;
    margin-top: 32px;
    cursor: grab;
    user-select: none;
    width: 100%;
    position: relative;
}
.z-testi-slider-wrap.dragging { cursor: grabbing; }
.z-testi-slider-wrap.dragging .z-testi-card { pointer-events: none; }

.z-testi-slider {
    display: flex;
    gap: 12px;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
}

.z-testi-card {
    background: var(--z-bg-card);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    padding: 24px;
    transition: border-color 0.2s;
    flex: 0 0 calc(33.333% - 8px);
    min-width: 260px;
}
.z-testi-card:hover { border-color: var(--z-border-hover); }

@media (max-width: 768px) {
    .z-testi-card { flex: 0 0 calc(80vw - 40px); }
}
@media (max-width: 480px) {
    .z-testi-card { flex: 0 0 calc(85vw - 32px); }
}

/* ══════════════════════════════════════
   TESTIMONIAL — realtime.js compatible
   Support both .z-testi-card & .testimonial-card
══════════════════════════════════════ */

/* Override realtime.js carousel with our slider */
#testimonial-grid {
    display: flex !important;
    gap: 12px !important;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
    will-change: transform !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Style realtime.js cards like our z-testi-card */
#testimonial-grid .testimonial-card,
#testimonial-grid .z-testi-card {
    background: var(--z-bg-card) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius) !important;
    padding: 22px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    transition: border-color 0.2s !important;
    /* width set by JS */
}
#testimonial-grid .testimonial-card:hover,
#testimonial-grid .z-testi-card:hover {
    border-color: var(--z-border-hover) !important;
}

/* Stars */
#testimonial-grid .tc-stars,
#testimonial-grid .z-testi-stars {
    font-size: 14px !important;
    color: rgba(200,160,50,0.9) !important;
    letter-spacing: 1px !important;
    display: block !important;
}

/* Body text */
#testimonial-grid .tc-body,
#testimonial-grid .z-testi-text {
    font-size: 13px !important;
    color: rgba(255,255,255,0.42) !important;
    line-height: 1.72 !important;
    font-style: italic !important;
    flex: 1 !important;
    margin: 0 !important;
}

/* Author row */
#testimonial-grid .tc-user,
#testimonial-grid .z-testi-author {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    margin-top: auto !important;
}

/* Avatar */
#testimonial-grid .tc-avatar,
#testimonial-grid .z-testi-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.45) !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Name */
#testimonial-grid .tc-name,
#testimonial-grid .z-testi-name {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.5) !important;
}

/* Product / role */
#testimonial-grid .tc-product,
#testimonial-grid .z-testi-role {
    display: block !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.22) !important;
    margin-top: 1px !important;
}

@media (max-width: 1023px) {
    .mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Footer */
.footer { background: #000 !important; }

/* Vars */
:root {
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.7);
    --primary: #FFFFFF;
    --primary-light: rgba(255,255,255,0.7);
    --gradient-primary: linear-gradient(135deg,#FFFFFF 0%,rgba(255,255,255,0.7) 100%);
    --radius-md: 12px;
    --z-sticky: 200;
}

/* ═══════════════════════════════════════
   MARKETPLACE — dark premium override
═══════════════════════════════════════ */

/* Cards */
.product-card {
    background: #0E0E0E !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
.product-card:hover {
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}
.product-card.premium { border-color: rgba(255,255,255,0.1) !important; }
.product-card.premium:hover { border-color: rgba(255,255,255,0.2) !important; box-shadow: none !important; }
.product-card.premium::before { display: none !important; }
.product-thumbnail { background: #080808 !important; }

/* Fix GTA SAMP card size - DO NOT override height/aspect ratio */
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

/* Badges muted */
.badge-premium { background: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.45) !important; }
.badge-featured { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.35) !important; }
.badge-hot { background: rgba(210,70,70,0.1) !important; color: #C05050 !important; }
.badge-new { background: rgba(74,222,128,0.07) !important; color: #4ADE80 !important; }
.badge-trending { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.35) !important; }

/* Content */
.creator-avatar { background: rgba(255,255,255,0.08) !important; }
.product-title { color: rgba(255,255,255,0.75) !important; }
.product-description { color: rgba(255,255,255,0.3) !important; }
.product-meta { border-color: rgba(255,255,255,0.05) !important; }
.meta-item { color: rgba(255,255,255,0.22) !important; }

/* Price */
.product-price { color: rgba(255,255,255,0.7) !important; }
.product-price.premium-price {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
.product-price.free { color: rgba(255,255,255,0.65) !important; }

/* Buttons */
.btn-product-download {
    background: rgba(255,255,255,0.9) !important;
    color: #000 !important;
    box-shadow: none !important;
}
.btn-product-download:hover { opacity:.87 !important; box-shadow: none !important; }
.btn-product-preview {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: rgba(255,255,255,0.45) !important;
}
.btn-product-preview:hover {
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.8) !important;
    background: rgba(255,255,255,0.07) !important;
}
.btn-product-like {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.25) !important;
}

/* Hide download icon on premium/order products */
.product-card[data-type="premium"] .btn-product-download i[data-lucide="download"],
.product-card[data-product-type="premium"] .btn-product-download i[data-lucide="download"] {
    display: none !important;
}

/* Filter/search */
.filter-btn { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.45) !important; }
.filter-btn:hover { border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.8) !important; }
.filter-btn.active { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.search-input { background: #0E0E0E !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.8) !important; }
.search-input:focus { border-color: rgba(255,255,255,0.2) !important; box-shadow: none !important; }
.sort-btn { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.45) !important; }
.sort-menu { background: #0A0A0A !important; border-color: rgba(255,255,255,0.08) !important; }
.sort-option:hover { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.8) !important; }
.sort-option.active { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* Detail modal */
.product-detail-dialog { background: #0A0A0A !important; border-color: rgba(255,255,255,0.08) !important; }
.product-detail-tabs button { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.45) !important; }
.product-detail-tabs button:hover,
.product-detail-tabs button.active { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; color: #fff !important; }
.product-detail-order { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; }
.product-info-grid div { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; }
.coming-soon-card { background: #0E0E0E !important; border-color: rgba(255,255,255,0.07) !important; }

/* ─ Trust bar auto-scroll animation ─ */
.z-trust {
    overflow: hidden !important;
    position: relative !important;
}
.z-trust-lbl { display: none !important; }
/* Create continuous scroll via duplicate content in JS */
@keyframes trust-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Footer */
.footer { background: #000 !important; }

/* Required CSS vars */
:root {
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.7);
    --primary: #FFFFFF;
    --primary-light: rgba(255,255,255,0.72);
    --gradient-primary: linear-gradient(135deg,#FFFFFF 0%,rgba(255,255,255,0.72) 100%);
    --radius-md: 12px;
    --z-sticky: 200;
}