* {margin:0;padding:0;box-sizing:border-box;} 
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;color:#1e293b;background:#f8fafc;overflow-x:hidden;} 
.container {width:100%;max-width:1200px;margin:0 auto;padding:0 20px;background:#f8fafc;} 
.navbar {background:#f8fafc;position:sticky;top:0;z-index:1000;padding:15px 0;} 
.navbar-content {display:flex;justify-content:space-between;align-items:center;} 
.navbar-brand {display:flex;align-items:center;gap:15px;} 
.navbar-logo {height:50px;width:auto;border-radius:8px;} 
.navbar-title {font-size:1.5rem;font-weight:700;color:#2563eb;margin:0;} 
.nav {display:flex;align-items:center;gap:25px;} 
.nav a {text-decoration:none;color:#475569;font-weight:500;font-size:0.95rem;transition:color 0.2s;padding:8px 0;position:relative;} 
.nav a:hover,.nav a.active {color:#2563eb;} 
.nav a.active::after {content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#2563eb;border-radius:2px;} 
.user-manual-btn {background:#e2e8f0;padding:8px 16px;border-radius:6px;display:flex;align-items:center;gap:8px;color:#334155;} 
.user-manual-btn:hover {background:#cbd5e1;color:#1e293b;} 
.btn-login {background:#2563eb;color:white;border:none;padding:10px 24px;border-radius:6px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.2s;} 
.btn-login:hover {background:#1d4ed8;} 
.mobile-menu-btn {display:none;background:none;border:none;font-size:1.5rem;color:#475569;cursor:pointer;padding:8px;} 
.hero {padding:60px 0;text-align:center;background:#f8fafc;} 
.badge {display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:white;padding:8px 20px;border-radius:20px;font-size:0.9rem;font-weight:500;margin-bottom:30px;} 
.hero h1 {font-size:3.5rem;font-weight:800;color:#0f172a;margin-bottom:20px;line-height:1.2;} 
.hero > p {font-size:1.2rem;color:#64748b;max-width:800px;margin:0 auto 40px;} 
.features-card {background:#f8fafc;border-radius:12px;padding:40px;margin-bottom:40px;} 
.system-info {display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #e2e8f0;} 
.system-icon {width:60px;height:60px;background:#2563eb;border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem;} 
.system-details h3 {font-size:1.5rem;color:#0f172a;margin-bottom:8px;} 
.system-details p {color:#64748b;display:flex;align-items:center;gap:8px;margin:4px 0;} 
.features-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px;} 
.feature-item {background:#f1f5f9;padding:20px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform 0.2s;} 
.feature-item:hover {transform:translateY(-2px);} 
.feature-item i {font-size:1.5rem;color:#2563eb;} 
.feature-item span {font-weight:600;color:#334155;text-align:center;} 
.action-buttons {display:flex;flex-direction:column;gap:15px;justify-content:center;margin-bottom:30px;} 
.install-app-container {display:none;justify-content:center;} 
.install-app-btn {background:#8b5cf6;color:white;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.2s;font-size:0.95rem;} 
.install-app-btn:hover {background:#7c3aed;} 
.main-action-buttons {display:flex;gap:15px;justify-content:center;} 
@media (max-width:768px) {.main-action-buttons{flex-direction:row;gap:10px;}.demo-btn,.login-btn{flex:1;min-width:120px;padding:14px 16px;font-size:0.9rem;}} 
.demo-btn,.login-btn {padding:14px 32px;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.2s;border:none;} 
.demo-btn {background:white;color:#2563eb;border:2px solid #2563eb;} 
.demo-btn:hover {background:#2563eb;color:white;} 
.login-btn {background:#059669;color:white;} 
.login-btn:hover {background:#047857;} 
.status-container {text-align:center;padding-top:20px;border-top:1px solid #e2e8f0;} 
.status-label {display:inline-flex;align-items:center;gap:8px;background:#d1fae5;color:#065f46;padding:8px 20px;border-radius:20px;font-weight:500;} 
.status-label i {color:#10b981;animation:pulse 2s infinite;} 
@keyframes pulse {0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}} 
.benefits {display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px;} 
.benefit-item {text-align:center;padding:30px 20px;background:#f1f5f9;border-radius:12px;} 
.benefit-item i {font-size:2rem;color:#2563eb;margin-bottom:15px;} 
.benefit-item h4 {font-size:1.2rem;color:#0f172a;margin-bottom:10px;} 
.benefit-item p {color:#64748b;font-size:0.95rem;} 
.showcase-section {padding:80px 0;background:#f8fafc;margin:40px 0;} 
.showcase-title {text-align:center;margin-bottom:50px;} 
.showcase-title h2 {font-size:2.5rem;color:#0f172a;margin-bottom:15px;font-weight:700;} 
.showcase-title p {color:#64748b;font-size:1.1rem;max-width:600px;margin:0 auto;} 
.showcase-highlight {color:#2563eb;font-weight:700;} 
.device-showcase {display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1000px;margin:0 auto;} 
.device-container {text-align:center;} 
.device-frame {position:relative;border-radius:20px;overflow:hidden;background:white;margin:0 auto;} 
.device-frame.mobile {width:280px;height:560px;padding:10px;} 
.device-frame.desktop {width:100%;height:300px;padding:15px;} 
.device-screen {width:100%;height:100%;border-radius:8px;overflow:hidden;background:white;} 
.screen-content {width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;} 
.device-label {margin-top:20px;font-weight:600;color:#334155;font-size:1.1rem;} 
.device-label i {margin-right:8px;color:#2563eb;} 
.about-section {padding:80px 0;background:#f8fafc;} 
.about-section h2 {text-align:center;font-size:2.5rem;color:#0f172a;margin-bottom:50px;font-weight:700;} 
.about-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:25px;} 
.about-card {background:#f1f5f9;padding:30px;border-radius:12px;text-align:center;transition:transform 0.2s;} 
.about-card:hover {transform:translateY(-5px);} 
.about-card i {font-size:2rem;color:#2563eb;margin-bottom:20px;} 
.about-card h3 {font-size:1.3rem;color:#0f172a;margin-bottom:15px;} 
.about-card p {color:#64748b;line-height:1.6;} 
.company-info {background:#f1f5f9;padding:60px 40px;border-radius:12px;margin:40px 0;} 
.company-info h3 {text-align:center;font-size:2rem;color:#0f172a;margin-bottom:30px;font-weight:700;} 
.company-info > p {text-align:center;color:#64748b;max-width:800px;margin:0 auto 40px;font-size:1.1rem;line-height:1.7;} 
.company-details {display:grid;grid-template-columns:repeat(4,1fr);gap:25px;} 
.company-item {text-align:center;padding:25px;background:#f8fafc;border-radius:8px;} 
.company-item h4 {color:#2563eb;font-size:1.1rem;margin-bottom:15px;font-weight:600;} 
.company-item p {color:#475569;line-height:1.6;} 
.footer {background:#0f172a;color:white;padding:60px 0 30px;margin-top:60px;} 
.footer-content {display:flex;flex-direction:column;align-items:center;gap:40px;} 
.footer-logo {text-align:center;} 
.footer-logo i {font-size:3rem;color:#60a5fa;margin-bottom:15px;} 
.footer-logo h3 {font-size:1.8rem;margin-bottom:8px;color:white;} 
.footer-logo p {color:#cbd5e1;} 
.footer-links {display:flex;gap:30px;flex-wrap:wrap;justify-content:center;} 
.footer-links a {color:#cbd5e1;text-decoration:none;transition:color 0.2s;} 
.footer-links a:hover {color:white;} 
.footer-copyright {text-align:center;padding-top:30px;border-top:1px solid #334155;width:100%;} 
.footer-copyright p {color:#94a3b8;margin:8px 0;} 
.hiiii {display:block;color:#60a5fa;text-decoration:none;margin:15px 0;font-weight:600;} 
.creator-note {display:flex;align-items:center;gap:8px;justify-content:center;margin-top:20px;color:#60a5fa;} 
.setup-call-btn {position:fixed;bottom:30px;right:30px;z-index:1000;} 
.setup-btn {background:#10b981;color:white;padding:14px 24px;border-radius:50px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:10px;transition:all 0.2s;} 
.setup-btn:hover {background:#059669;transform:translateY(-2px);} 
.demo-modal,.video-modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:2000;align-items:center;justify-content:center;padding:20px;} 
.demo-modal-content,.video-modal-content {background:#f8fafc;border-radius:12px;width:90%;max-width:500px;overflow:hidden;animation:modalSlide 0.3s ease;} 
.demo-modal-header {padding:30px;background:#2563eb;color:white;text-align:center;} 
.demo-modal-header h2 {font-size:1.8rem;margin-bottom:10px;} 
.demo-options {padding:30px;} 
.demo-option-btn {display:flex;align-items:center;gap:20px;padding:20px;background:#f1f5f9;border-radius:8px;cursor:pointer;transition:all 0.2s;margin-bottom:15px;} 
.demo-option-btn:hover {background:#e2e8f0;} 
.demo-option-icon {width:50px;height:50px;background:#2563eb;border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;} 
.demo-option-text h3 {font-size:1.2rem;margin-bottom:5px;color:#0f172a;} 
.demo-modal-footer {padding:20px 30px;text-align:center;border-top:1px solid #e2e8f0;} 
.demo-close-btn {background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:10px 30px;border-radius:6px;cursor:pointer;font-weight:600;transition:all 0.2s;} 
.demo-close-btn:hover {background:#e2e8f0;} 
.video-modal-content {max-width:900px;} 
.video-modal-header {padding:20px 30px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;} 
.video-modal-header h3 {font-size:1.3rem;color:#0f172a;display:flex;align-items:center;gap:10px;} 
.video-close-btn {background:none;border:none;color:#475569;font-size:1.5rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s;} 
.video-close-btn:hover {background:#f1f5f9;} 
.video-container {padding:30px;} 
.video-frame {position:relative;border-radius:8px;overflow:hidden;background:#000;margin-bottom:20px;} 
.video-frame.mobile-video {width:320px;height:640px;margin:0 auto;} 
.video-frame.desktop-video {width:100%;height:0;padding-bottom:56.25%;} 
.video-frame iframe {position:absolute;top:0;left:0;width:100%;height:100%;border:none;} 
.video-info {text-align:center;} 
.video-info p {color:#64748b;margin-bottom:15px;} 
.video-duration {display:inline-block;background:#2563eb;color:white;padding:6px 15px;border-radius:20px;font-size:0.9rem;} 
@keyframes modalSlide {from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}} 
@media (max-width:1024px) {.hero h1{font-size:2.8rem;}.features-grid,.benefits,.about-grid,.company-details{grid-template-columns:repeat(2,1fr);}.device-showcase{grid-template-columns:1fr;gap:60px;}} 
@media (max-width:768px) {.container{padding:0 15px;}.nav{display:none;}.mobile-menu-btn{display:block;}.hero{padding:40px 0;}.hero h1{font-size:2.2rem;}.hero > p{font-size:1.1rem;}.features-card{padding:25px;}.install-app-container{display:flex;margin-bottom:15px;}.install-app-btn{width:100%;justify-content:center;}.demo-btn,.login-btn{width:auto;justify-content:center;}.showcase-title h2,.about-section h2{font-size:2rem;}.device-frame.mobile{width:250px;height:500px;}.device-frame.desktop{height:250px;}} 
@media (max-width:480px) {.hero h1{font-size:1.8rem;}.features-grid,.benefits,.about-grid,.company-details{grid-template-columns:1fr;}.system-info{flex-direction:column;text-align:center;}.setup-call-btn{bottom:20px;right:20px;}.setup-btn{padding:12px 20px;font-size:0.9rem;}.video-frame.mobile-video{width:280px;height:560px;}.demo-modal-content,.video-modal-content{width:95%;}} 
.mobile-menu {display:none;position:fixed;top:80px;left:0;right:0;background:#f8fafc;z-index:999;padding:20px;} 
.mobile-nav-link {display:flex;align-items:center;gap:12px;padding:15px 0;color:#475569;text-decoration:none;border-bottom:1px solid #e2e8f0;} 
.mobile-nav-link:last-child {border-bottom:none;} 
.mobile-nav-link.active {color:#2563eb;font-weight:600;} 
.mobile-menu-actions {margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f0;} 
html,body {max-width:100%;overflow-x:hidden;} 
img,video,iframe {max-width:100%;height:auto;}