:root { --color-primary: #1a1a1a; --color-accent: #d4af37; --color-bg-light: #f8f9fa; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { color: #333; line-height: 1.6; background: #fff; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.bg-light-section { background: var(--color-bg-light); padding: 60px 0; }

.header { height: 80px; border-bottom: 1px solid #e5e5e5; display:flex; align-items:center; }
.header-box { width:100%; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: bold; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.btn-primary, .btn-main { background: var(--color-primary); color: #fff !important; padding: 10px 20px; border-radius: 4px; font-weight: bold; cursor: pointer; display: inline-block; border: none;}

/* Lang Dropdown */
.lang-dropdown { position: relative; display: inline-block; }
.lang-toggle { cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: bold;}
.lang-menu { display: none; position: absolute; top: 100%; right: 0; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; padding: 8px 0; min-width: 130px; z-index: 2000; }
.lang-dropdown:hover .lang-menu { display: block; }
.lang-menu a { display: block; padding: 8px 16px; font-size: 14px; color: #333; text-align: left; }
.lang-menu a:hover { background: #f5f5f5; color: var(--color-accent); }

/* Landing Layouts */
.hero-slider { overflow: hidden; height: 400px; background: #111; color: #fff; display: flex; align-items: center; text-align: center; cursor: pointer;}
.slider-track { display: flex; width: 400%; animation: slide 15s infinite; }
.slide { width: 100%; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; }
@keyframes slide { 0%, 20% { transform: translateX(0%); } 25%, 45% { transform: translateX(-100%); } 50%, 70% { transform: translateX(-200%); } 75%, 95% { transform: translateX(-300%); } 100% { transform: translateX(0%); } }

.pro-intro { padding: 80px 0; }
.stats-hover-container { display: flex; gap: 40px; margin-top: 40px; align-items: center;}
.stats-list { flex: 1; display: flex; flex-direction: column; gap: 20px;}
.stat-block { padding: 25px; background: #f8f9fa; cursor: pointer; border-left: 4px solid transparent; border-radius: 6px; transition: 0.3s;}
.stat-block:hover { background: #fff; border-left-color: var(--color-accent); box-shadow: 0 5px 20px rgba(0,0,0,0.08);}
.stat-block h3 { margin-bottom: 8px;}
.stat-image-display { flex: 1; }
.stat-image-display img { width: 100%; height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);}

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px;}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px;}
.card { background: #fff; padding: 40px 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;}
.card-icon { font-size: 36px; color: var(--color-primary); margin-bottom: 20px; }

.seller-story { padding: 80px 0; }
.story-slider { background: #111; color: #fff; border-radius: 16px; display: flex; overflow: hidden;}
.story-slide { display: flex; width: 100%; padding: 50px; align-items: center; gap: 40px;}
.story-text { flex: 1; font-size: 22px; font-style: italic; line-height: 1.6;}
.story-slide img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; }
.footer-cta { padding: 80px 0; background: #f8f9fa;}

/* Onboarding */
.flags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; }
.flag-item { border: 1px solid #e8e8e8; border-radius: 8px; padding: 20px 10px; cursor: pointer; text-align: center; font-weight: bold; background: #fff; transition: 0.2s;}
.flag-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-color: var(--color-primary); }
.flag-item img { margin-bottom: 10px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

/* Modals & Globals */
.floating-service { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #111; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.3);}
.auth-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 99999; }
.info-modal { background: #fff; padding: 40px; border-radius: 12px; position: relative; max-height: 90vh; display: flex; flex-direction: column;}
.auth-close { position: absolute; top: 15px; right: 25px; font-size: 28px; cursor: pointer; color:#888; }
.auth-input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;}
.scroll-content { overflow-y: auto; padding-right: 15px; margin-top: 20px; font-size: 15px; line-height: 1.8; color: #444;}
.scroll-content::-webkit-scrollbar { width: 6px; }
.scroll-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }