/* ============================================
   APKSHO.COM - COMPLETE CSS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#a5b4fc;--secondary:#10b981;--secondary-dark:#059669;--accent:#f59e0b;--background:#f8fafc;--surface:#fff;--text-primary:#1e293b;--text-secondary:#64748b;--text-light:#94a3b8;--border:#e2e8f0;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--radius:12px;--radius-sm:6px;--radius-full:9999px;--transition:all .3s ease}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.7;min-height:100vh}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:600;line-height:1.3;color:var(--text-primary)}
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}
p{margin-bottom:1rem;color:var(--text-secondary)}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto}
ul{list-style:none}

.container{max-width:1400px;margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.gap-3{gap:1.5rem}.gap-4{gap:2rem}
.text-center{text-align:center}
.mb-4{margin-bottom:2rem}

.top-bar{background:rgba(0,0,0,.1);padding:10px 0;font-size:13px;color:rgba(255,255,255,.9)}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:20px}
.top-bar a{color:rgba(255,255,255,.9);display:flex;align-items:center;gap:5px}
.top-bar a:hover{color:var(--accent)}

header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-lg)}
.main-header{padding:15px 0}
.main-header .container{display:flex;justify-content:space-between;align-items:center}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo-icon{width:50px;height:50px;background:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:24px}
.logo-icon i{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-text h1{font-size:24px;font-weight:700;margin:0;color:#fff}
.logo-text span{font-size:11px;opacity:.8;display:block}

nav ul{display:flex;list-style:none;gap:5px}
nav a{color:#fff;padding:10px 18px;border-radius:var(--radius-sm);transition:var(--transition);font-weight:500;font-size:14px;display:flex;align-items:center;gap:6px}
nav a:hover,nav a.active{background:rgba(255,255,255,.2)}
.mobile-menu-btn{display:none;background:0 0;border:none;color:#fff;font-size:24px;cursor:pointer}

.page-hero{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 50%,var(--primary-dark) 100%);color:#fff;padding:60px 0;text-align:center}
.page-hero h1{font-size:42px;font-weight:700;margin-bottom:15px;color:#fff}
.page-hero p{font-size:18px;opacity:.9;max-width:600px;margin:0 auto;color:rgba(255,255,255,.9)}
.page-hero-sm{padding:40px 0}
.page-hero-sm h1{font-size:32px}

.breadcrumb{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:14px}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.6}

section{padding:60px 0}
.section-white{background:#fff}
.section-gray{background:var(--background)}
.section-gradient{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);color:#fff}
.section-header{text-align:center;margin-bottom:50px}
.section-header h2{font-size:36px;margin-bottom:15px}
.section-header p{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto}

.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:var(--transition)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.card-header{padding:20px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}
.card-header h3{color:#fff;font-size:18px;display:flex;align-items:center;gap:10px}
.card-body{padding:25px}

.info-card{background:#fff;border-radius:var(--radius);padding:30px;text-align:center;transition:var(--transition);border:1px solid var(--border)}
.info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.info-card .icon{width:70px;height:70px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.info-card .icon i{font-size:30px;color:#fff}
.info-card h3{font-size:18px;margin-bottom:12px}
.info-card p{font-size:14px}

.feature-card{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:var(--radius);padding:30px;text-align:center;transition:var(--transition)}
.feature-card:hover{background:rgba(255,255,255,.2);transform:translateY(-5px)}
.feature-card i{font-size:48px;margin-bottom:20px;color:#fff}
.feature-card h3{font-size:20px;margin-bottom:12px;color:#fff}
.feature-card p{font-size:14px;opacity:.9;color:rgba(255,255,255,.9)}

.team-card{background:#fff;border-radius:var(--radius);padding:30px;text-align:center;box-shadow:var(--shadow);transition:var(--transition)}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.team-card .avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;overflow:hidden;border:4px solid var(--primary-light)}
.team-card h3{font-size:18px;margin-bottom:5px}
.team-card .role{font-size:14px;color:var(--primary);margin-bottom:15px}
.team-card .social-links{display:flex;justify-content:center;gap:10px}
.team-card .social-links a{width:36px;height:36px;background:var(--background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:var(--transition)}
.team-card .social-links a:hover{background:var(--primary);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);border:none;text-decoration:none;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(99,102,241,.3);color:#fff}
.btn-secondary{background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-dark) 100%);color:#fff}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(16,185,129,.3);color:#fff}
.btn-outline{background:0 0;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{background:var(--background);transform:translateY(-2px)}
.btn-lg{padding:18px 36px;font-size:18px}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-block{width:100%}

.form-group{margin-bottom:20px}
.form-group label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:8px}
.form-group label i{color:var(--primary)}
.required{color:var(--error)}
.form-control{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:inherit;transition:var(--transition);background:var(--background)}
.form-control:focus{outline:0;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.1)}
.form-control::placeholder{color:var(--text-light)}
textarea.form-control{min-height:120px;resize:vertical}

.stats-grid{display:flex;justify-content:center;gap:50px;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-item .number{font-size:42px;font-weight:700;color:#fff;line-height:1;margin-bottom:5px}
.stat-item .label{font-size:14px;opacity:.8}

.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600}
.badge-primary{background:rgba(99,102,241,.1);color:var(--primary)}
.badge-success{background:rgba(34,197,94,.1);color:var(--success)}
.badge-warning{background:rgba(245,158,11,.1);color:var(--warning)}
.badge-error{background:rgba(239,68,68,.1);color:var(--error)}

.alert{padding:15px 20px;border-radius:var(--radius);display:flex;align-items:flex-start;gap:15px;margin-bottom:20px}
.alert i{font-size:20px;flex-shrink:0;margin-top:2px}
.alert-content h4{font-size:16px;margin-bottom:5px}
.alert-content p{font-size:14px;margin:0}
.alert-info{background:rgba(59,130,246,.1);border-left:4px solid var(--info)}
.alert-info i{color:var(--info)}
.alert-success{background:rgba(34,197,94,.1);border-left:4px solid var(--success)}
.alert-success i{color:var(--success)}
.alert-warning{background:rgba(245,158,11,.1);border-left:4px solid var(--warning)}
.alert-warning i{color:var(--warning)}
.alert-error{background:rgba(239,68,68,.1);border-left:4px solid var(--error)}
.alert-error i{color:var(--error)}

.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:15px;overflow:hidden}
.faq-question{padding:20px 25px;background:var(--background);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text-primary);transition:var(--transition)}
.faq-question:hover{background:rgba(99,102,241,.1)}
.faq-question i{transition:var(--transition);color:var(--primary)}
.faq-item.active .faq-question{background:rgba(99,102,241,.1)}
.faq-item.active .faq-question i{transform:rotate(180deg)}
.faq-answer{padding:0 25px;max-height:0;overflow:hidden;transition:all .3s ease}
.faq-item.active .faq-answer{padding:20px 25px;max-height:500px}
.faq-answer p{color:var(--text-secondary);font-size:14px;margin:0}

.table-wrapper{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--border)}
th{background:var(--background);font-weight:600;color:var(--text-primary);font-size:14px}
td{font-size:14px;color:var(--text-secondary)}
tr:hover td{background:var(--background)}

.tabs{display:flex;gap:5px;background:var(--background);padding:5px;border-radius:var(--radius);margin-bottom:30px}
.tab-btn{flex:1;padding:12px 20px;background:0 0;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);color:var(--text-secondary);font-family:inherit}
.tab-btn:hover{color:var(--primary)}
.tab-btn.active{background:#fff;color:var(--primary);box-shadow:var(--shadow)}
.tab-content{display:none}
.tab-content.active{display:block}

.code-block{background:#1e293b;border-radius:var(--radius);overflow:hidden}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:rgba(0,0,0,.2)}
.code-header span{font-size:13px;color:rgba(255,255,255,.6)}
.code-header button{background:rgba(255,255,255,.1);border:none;color:#fff;padding:5px 15px;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;transition:var(--transition)}
.code-header button:hover{background:var(--primary)}
.code-block pre{padding:20px;overflow-x:auto;margin:0}
.code-block code{font-family:'Fira Code',Consolas,monospace;font-size:14px;color:#e2e8f0;line-height:1.6}
code{font-family:'Fira Code',Consolas,monospace;background:var(--background);padding:2px 8px;border-radius:4px;font-size:.9em;color:var(--primary)}

.status-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);font-size:14px;font-weight:500}
.status-online{background:rgba(34,197,94,.1);color:var(--success)}
.status-online::before{content:'';width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s infinite}
.status-offline{background:rgba(239,68,68,.1);color:var(--error)}
.status-maintenance{background:rgba(245,158,11,.1);color:var(--warning)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.pricing-card{background:#fff;border-radius:16px;padding:40px;text-align:center;border:2px solid var(--border);transition:var(--transition);position:relative}
.pricing-card:hover{border-color:var(--primary);transform:translateY(-10px);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.pricing-card.featured{border-color:var(--primary);transform:scale(1.05)}
.pricing-card.featured::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:5px 20px;border-radius:var(--radius-full);font-size:12px;font-weight:600}
.pricing-card .plan-name{font-size:24px;font-weight:700;margin-bottom:10px}
.pricing-card .plan-price{font-size:48px;font-weight:700;color:var(--primary);margin-bottom:5px}
.pricing-card .plan-price span{font-size:16px;color:var(--text-secondary);font-weight:400}
.pricing-card .plan-description{font-size:14px;color:var(--text-secondary);margin-bottom:30px}
.pricing-card .features-list{text-align:left;margin-bottom:30px}
.pricing-card .features-list li{padding:10px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:14px}
.pricing-card .features-list li:last-child{border-bottom:none}
.pricing-card .features-list li i{color:var(--success)}
.pricing-card .features-list li.disabled{color:var(--text-light)}
.pricing-card .features-list li.disabled i{color:var(--text-light)}

.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.blog-card-image{height:200px;overflow:hidden}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.blog-card:hover .blog-card-image img{transform:scale(1.1)}
.blog-card-content{padding:25px}
.blog-card-meta{display:flex;align-items:center;gap:15px;margin-bottom:15px;font-size:13px;color:var(--text-secondary)}
.blog-card-meta span{display:flex;align-items:center;gap:5px}
.blog-card h3{font-size:18px;margin-bottom:10px;transition:var(--transition)}
.blog-card h3:hover{color:var(--primary)}
.blog-card p{font-size:14px;color:var(--text-secondary);margin-bottom:15px}
.blog-card .read-more{font-size:14px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:5px}
.blog-card .read-more:hover{gap:10px}

.legal-content{max-width:900px;margin:0 auto;padding:50px 0}
.legal-content h2{font-size:24px;margin-top:40px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.legal-content h3{font-size:18px;margin-top:30px;margin-bottom:15px}
.legal-content p{margin-bottom:15px;line-height:1.8}
.legal-content ul{margin:15px 0;padding-left:25px;list-style:disc}
.legal-content ul li{margin-bottom:10px;color:var(--text-secondary)}
.legal-content .last-updated{background:var(--background);padding:20px;border-radius:var(--radius);margin-bottom:30px;display:flex;align-items:center;gap:10px}
.legal-content .last-updated i{color:var(--primary)}

.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact-info-card{background:var(--primary);color:#fff;border-radius:16px;padding:40px;position:relative;overflow:hidden}
.contact-info-card::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:rgba(255,255,255,.1);border-radius:50%}
.contact-info-card h3{font-size:24px;margin-bottom:10px;color:#fff}
.contact-info-card>p{opacity:.9;margin-bottom:30px;color:rgba(255,255,255,.9)}
.contact-info-item{display:flex;align-items:flex-start;gap:15px;margin-bottom:25px}
.contact-info-item .icon{width:45px;height:45px;background:rgba(255,255,255,.2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-item .icon i{font-size:18px}
.contact-info-item .content h4{font-size:16px;margin-bottom:5px;color:#fff}
.contact-info-item .content p{font-size:14px;opacity:.9;margin:0;color:rgba(255,255,255,.9)}
.contact-form-card{background:#fff;border-radius:16px;padding:40px;box-shadow:var(--shadow-lg)}

footer{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#fff;padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand h3{font-size:24px;margin-bottom:15px;color:#fff;display:flex;align-items:center;gap:10px}
.footer-brand p{font-size:14px;opacity:.7;margin-bottom:20px;line-height:1.8;color:rgba(255,255,255,.7)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition)}
.footer-social a:hover{background:var(--primary);transform:translateY(-3px)}
.footer-column h4{font-size:16px;margin-bottom:20px;color:#fff}
.footer-column li{margin-bottom:12px}
.footer-column a{color:rgba(255,255,255,.7);font-size:14px;display:flex;align-items:center;gap:8px}
.footer-column a:hover{color:var(--primary-light);padding-left:5px}
.footer-column a i{font-size:10px}
.footer-bottom{padding:25px 0;display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:13px;opacity:.7;color:rgba(255,255,255,.7);margin:0}
.footer-bottom-links{display:flex;gap:25px}
.footer-bottom-links a{color:rgba(255,255,255,.7);font-size:13px}
.footer-bottom-links a:hover{color:#fff}

.scroll-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-lg);transition:var(--transition);z-index:1000}
.scroll-top:hover{transform:translateY(-5px)}
.scroll-top.visible{display:flex}

.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-primary);color:#fff;padding:15px 30px;border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:1100;transition:var(--transition);display:flex;align-items:center;gap:10px}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--secondary)}
.toast.error{background:var(--error)}

.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1050}
.loading-overlay.active{display:flex}
.loading-content{text-align:center;color:#fff}
.loading-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}

.progress-bar{height:8px;background:var(--background);border-radius:var(--radius);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);border-radius:var(--radius);transition:width .3s ease}

@media(max-width:1200px){.grid-4{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:992px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.contact-section{grid-template-columns:1fr}.pricing-card.featured{transform:none}}
@media(max-width:768px){html{font-size:15px}h1{font-size:2rem}h2{font-size:1.75rem}.top-bar{display:none}nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--primary-dark);flex-direction:column;padding:20px;box-shadow:var(--shadow-lg)}nav ul.active{display:flex}nav a{padding:15px;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-menu-btn{display:block}.page-hero h1{font-size:28px}.page-hero p{font-size:16px}.section-header h2{font-size:28px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:15px;text-align:center}.footer-bottom-links{flex-wrap:wrap;justify-content:center}.stats-grid{gap:30px}.stat-item .number{font-size:32px}.tabs{flex-direction:column}}
@media(max-width:480px){.container{padding:0 15px}.btn{padding:12px 20px;font-size:14px}.card-body,.pricing-card,.contact-form-card,.contact-info-card{padding:25px}.scroll-top{bottom:20px;right:20px;width:45px;height:45px}}