:root{--md-primary:#3f51b5;--md-primary-dark:#283593;--md-primary-container:#e0e0ff;--md-surface:#f8f9fe;--bg-gradient:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#311042 100%);--text-main:#1e293b;--text-muted:#64748b} html,body{width:100%;max-width:100%;overflow-x:hidden !important;position:relative;scroll-behavior:smooth;scroll-padding-top:90px} body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background-color:#fbfcfe;color:var(--text-main)} .navbar{background:rgba(15,23,42,0.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.1);transition:all 0.3s ease;padding:14px 0} .navbar-brand{font-weight:800;letter-spacing:-0.5px} .nav-link{font-weight:600;color:rgba(255,255,255,0.85) !important;transition:color 0.2s} .nav-link:hover{color:#818cf8 !important} .hero-section{background:var(--bg-gradient);padding:140px 0 80px;color:#ffffff;position:relative;overflow:hidden} .hero-title{font-size:3.4rem;font-weight:800;line-height:1.15;background:linear-gradient(135deg,#ffffff 0%,#c7d2fe 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;word-break:break-word} .badge-md3{background:rgba(99,102,241,0.2);border:1px solid rgba(129,140,248,0.4);color:#a5b4fc;border-radius:50px;padding:8px 18px;font-size:0.85rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;max-width:100%} .app-mockup{background:#ffffff;color:var(--text-main);border-radius:32px;padding:20px;box-shadow:0 25px 60px -15px rgba(0,0,0,0.6),0 0 30px rgba(99,102,241,0.25);border:5px solid #1e293b;max-width:100%} .hero-media-stage{display:flex;align-items:center} .hero-media{position:relative;width:100%;border-radius:32px;isolation:isolate;overflow:hidden;transition:height 0.75s ease} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111a35;border:5px solid #1e293b;border-radius:32px;box-shadow:0 25px 60px -15px rgba(0,0,0,0.6),0 0 30px rgba(99,102,241,0.25);opacity:0;pointer-events:none;transition:opacity 0.6s ease;z-index:1} .hero-video.is-ready{opacity:1} @media (prefers-reduced-motion:reduce){.hero-video,.hero-media{transition:none}} .mockup-list-item{background:#f1f5f9;padding:12px 16px;border-radius:18px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;transition:transform 0.2s} .mockup-list-item:hover{transform:translateX(4px)} .icon-shape{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0} .icon-primary{background:#e0e7ff;color:#4338ca} .icon-success{background:#dcfce7;color:#15803d} .icon-warning{background:#fef3c7;color:#b45309} .icon-danger{background:#fee2e2;color:#b91c1c} .m3-card{background:#ffffff;border-radius:24px;border:1px solid #e2e8f0;padding:28px;height:100%;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .m3-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px rgba(63,81,181,0.12);border-color:#cbd5e1} .sync-section{background:var(--bg-gradient);color:#ffffff} .sync-step-button{width:100%;border:1px solid rgba(165,180,252,0.28);border-radius:18px;background:rgba(255,255,255,0.07);color:#e2e8f0;padding:16px 18px;text-align:left;transition:background 0.25s,border-color 0.25s,transform 0.25s} .sync-step-button:hover,.sync-step-button[aria-pressed="true"]{background:rgba(99,102,241,0.22);border-color:#a5b4fc;color:#ffffff} .sync-step-button[aria-pressed="true"]{transform:translateX(5px)} .sync-step-number{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:12px;border-radius:50%;background:rgba(129,140,248,0.25);color:#c7d2fe;font-weight:800} .sync-visual{background:#ffffff;color:var(--text-main);border:5px solid #1e293b;border-radius:30px;padding:26px;box-shadow:0 25px 60px -15px rgba(0,0,0,0.55)} .sync-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px} .sync-node{min-height:145px;border-radius:20px;background:#f1f5f9;padding:18px 10px;text-align:center;opacity:0.55;transform:translateY(0);transition:opacity 0.4s,transform 0.4s,background 0.4s} .sync-node.is-active{opacity:1;transform:translateY(-6px);background:#e0e7ff} .sync-node i{display:block;color:#4338ca;font-size:2rem;margin-bottom:12px} .sync-node strong,.sync-node small{display:block} .sync-node strong{font-size:0.9rem} .sync-node small{color:#64748b;font-size:0.72rem} .sync-connector{color:#818cf8;font-size:1.5rem} .sync-detail{min-height:102px;margin-top:22px;padding:17px 20px;background:#f8f9fe;border-radius:18px} .sync-detail h3{font-size:1rem;font-weight:800} .sync-detail p{color:#64748b;font-size:0.88rem;margin:0} .sync-visual .progress{height:6px;background:#e2e8f0} .sync-visual .progress-bar{background:#6366f1;transition:width 0.5s ease} @media (max-width:576px){.sync-visual{padding:15px} .sync-flow{gap:4px} .sync-node{min-height:120px;padding:12px 4px;border-radius:14px} .sync-node i{font-size:1.45rem;margin-bottom:8px} .sync-node strong{font-size:0.7rem} .sync-node small{font-size:0.62rem} .sync-connector{font-size:1rem}} @media (prefers-reduced-motion:reduce){.sync-step-button,.sync-node,.sync-visual .progress-bar{transition:none}} footer{background:#0f172a;color:#94a3b8;padding:60px 0 30px} @media (max-width:991px){.hero-title{font-size:2.3rem} .hero-section{padding:120px 0 60px}} @media (max-width:576px){.hero-title{font-size:1.85rem} .app-mockup{padding:14px;border-radius:24px} .mockup-list-item{padding:10px 12px} .btn-responsive{width:100%;justify-content:center}} .inl-00d1756757{font-size:0.95rem;line-height:1.6} .inl-111b437b9e{background:#e0f2fe;color:#0369a1} .inl-1b93e586f2{font-size:0.78rem} .inl-29fbc7a5f6{width:33%} .inl-56af3282d2{font-size:0.8rem} .inl-85ddf1c3bf{font-size:0.85rem} .inl-c7e6c0f1bf{color:#cbd5e1;font-size:1.05rem} .inl-ca6c5fb291{background:var(--bg-gradient)} .inl-dae4d848f2{font-size:1.05rem} .inl-e014588268{font-size:0.95rem} .inl-eea3ca175c{width:auto;height:38px} .inl-fb2a20f24c{width:72px;height:72px} .inl-fbd03cb46b{color:#cbd5e1} html:not(.aos-ready) [data-aos]{opacity:1 !important;transform:none !important;transition:none !important} @media (prefers-reduced-motion:reduce){[data-aos]{opacity:1 !important;transform:none !important;transition:none !important}}