:root { --navy:#0b1d3b; --blue:#1468e8; --cyan:#25b9f3; --ink:#14213d; --muted:#61708a; --surface:#f5f8fd; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:Inter,Arial,sans-serif; background:#fff; } .desk-container { width:min(1140px,calc(100% - 40px)); margin:auto; }
.desk-header { height:74px; display:flex; align-items:center; background:var(--navy); box-shadow:0 2px 14px #07152f33; } .desk-header .desk-container { width:min(1240px,calc(100% - 96px)); } .header-content { display:flex; align-items:center; justify-content:space-between; } .brand img { display:block; max-height:38px; max-width:190px; object-fit:contain; } .header-actions { display:flex; align-items:center; gap:22px; } .header-actions a { color:#dce9ff; text-decoration:none; font-size:.9rem; font-weight:600; } .header-actions i { margin-right:5px; } .header-actions .download-link { padding:10px 15px; color:#fff; border:1px solid #528bf1; border-radius:9px; background:#175bc8; }
.hero { overflow:hidden; position:relative; min-height:535px; padding:82px 0 68px; background:radial-gradient(circle at 80% 30%,#d7f3ff 0,transparent 24%),linear-gradient(127deg,#f8fbff 0%,#edf5ff 52%,#e5f7ff 100%); } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:34px; } .eyebrow,.section-label { color:#1d68d8; font-size:.73rem; font-weight:800; letter-spacing:.12em; } .eyebrow { display:inline-flex; gap:8px; align-items:center; padding:7px 11px; border:1px solid #bfd8ff; border-radius:99px; background:#fff9; letter-spacing:.05em; } .status-dot { width:8px; height:8px; border-radius:50%; background:#18b85b; box-shadow:0 0 0 4px #18b85b22; } h1,h2,h3,p { margin-top:0; } h1 { max-width:650px; margin:17px 0 18px; color:#0b2349; font:700 clamp(2.25rem,4.1vw,3.8rem)/1.1 Poppins,Inter,sans-serif; letter-spacing:-.055em; } h1 span { color:#1175e6; } .hero-description { max-width:580px; color:#52647f; font-size:1.05rem; line-height:1.7; } .hero-actions { display:flex; align-items:center; gap:21px; margin-top:27px; } .primary-button { display:inline-flex; gap:12px; align-items:center; padding:12px 19px; color:#fff; border-radius:12px; text-decoration:none; background:linear-gradient(135deg,#187df0,#1155c5); box-shadow:0 13px 25px #1261cc33; transition:.2s transform,.2s box-shadow; } .primary-button:hover { transform:translateY(-2px); color:#fff; box-shadow:0 17px 30px #1261cc44; } .primary-button>i { font-size:1.5rem; } .primary-button span { display:grid; gap:3px; } .primary-button strong { font-size:.94rem; } .primary-button small { color:#dbeeff; font-size:.7rem; } .secondary-button { color:#2465b9; font-size:.9rem; font-weight:700; text-decoration:none; } .secondary-button i { margin-left:5px; } .compatibility { margin:18px 0 0; color:#6a7b95; font-size:.78rem; } .compatibility i { color:#15ad60; margin-right:5px; }
.hero-visual { min-height:365px; position:relative; } .glow { position:absolute; border-radius:50%; filter:blur(4px); } .glow-one { width:290px; height:290px; top:31px; left:88px; background:#69d6fa66; } .glow-two { width:180px; height:180px; right:3px; bottom:3px; background:#4d76f244; } .remote-card { position:absolute; overflow:hidden; border:6px solid #fff; border-radius:14px; box-shadow:0 24px 53px #1a4e9440; background:#fff; } .back-card { width:263px; height:179px; top:7px; right:7px; opacity:.76; transform:rotate(8deg); } .main-card { width:min(390px,94%); height:260px; top:59px; left:20px; transform:rotate(-2deg); } .window-bar { height:29px; display:flex; align-items:center; gap:5px; padding:0 9px; background:#122747; } .window-bar span { width:7px; height:7px; border-radius:50%; background:#6f86a5; } .window-bar span:first-child { background:#f45f70; } .window-bar b { margin-left:auto; color:#dce9ff; font-size:.54rem; font-weight:600; } .screen-lines { display:grid; gap:11px; padding:25px; } .screen-lines i { height:17px; display:block; border-radius:5px; background:#d6e5f8; } .desktop-scene { position:relative; height:calc(100% - 29px); overflow:hidden; background:linear-gradient(140deg,#0758c2,#10ace8 54%,#083a86); } .desktop-scene:before { position:absolute; width:260px; height:260px; border:1px solid #87e7ff77; border-radius:50%; content:""; top:-105px; right:-25px; } .screen-badge { position:absolute; top:15px; left:15px; display:flex; align-items:center; gap:6px; padding:6px 8px; color:#dff8ff; border:1px solid #9aefff88; border-radius:6px; background:#0e5197a8; font-size:.61rem; } .screen-badge i { color:#48e49b; } .desk-folder { position:absolute; width:25px; height:19px; border-radius:2px 2px 4px 4px; background:#f6ca51; box-shadow:0 2px 7px #061a4d55; } .desk-folder:before { position:absolute; width:11px; height:4px; content:""; top:-3px; left:2px; border-radius:2px 2px 0 0; background:#ffd966; } .desk-folder.one { top:72px; left:37px; } .desk-folder.two { top:112px; left:37px; } .desk-folder.three { top:72px; left:79px; } .taskbar { position:absolute; right:0; bottom:0; left:0; height:25px; display:flex; align-items:center; gap:12px; padding:0 12px; background:#061b4eaa; } .taskbar i { width:10px; height:10px; border-radius:3px; background:#48bfff; } .taskbar i:nth-child(2) { background:#f5cf51; } .taskbar i:nth-child(3) { background:#4be29a; } .taskbar em { width:25px; height:4px; margin-left:auto; border-radius:4px; background:#d9eaff77; } .connection-pill { position:absolute; z-index:2; right:2px; bottom:27px; display:grid; grid-template-columns:auto 1fr; column-gap:7px; padding:10px 13px; border:1px solid #fff; border-radius:11px; background:#ffffffed; box-shadow:0 11px 23px #174a8a33; } .connection-pill strong { font-size:.68rem; } .connection-pill small { grid-column:2; color:#6c7e98; font-size:.6rem; } .pulse { width:9px; height:9px; margin-top:3px; border-radius:50%; background:#18bf62; box-shadow:0 0 0 4px #18bf6222; } .cursor { position:absolute; z-index:3; right:65px; bottom:4px; font-size:2.25rem; color:#fff; filter:drop-shadow(0 3px 2px #10305a99); transform:rotate(-15deg); }
.benefits { padding:86px 0 91px; } .section-heading { max-width:600px; margin-bottom:34px; } h2 { margin:9px 0 0; color:#0d2548; font:700 clamp(1.75rem,3vw,2.55rem)/1.2 Poppins,Inter,sans-serif; letter-spacing:-.04em; } .benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; } .benefit-card { min-height:222px; padding:25px 21px; border:1px solid #e1eaf7; border-radius:15px; background:#fff; box-shadow:0 8px 25px #1d579108; transition:.2s transform,.2s box-shadow; } .benefit-card:hover { transform:translateY(-4px); box-shadow:0 18px 33px #1d57911c; } .benefit-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:20px; border-radius:12px; font-size:1.2rem; } .blue { color:#176be3; background:#e8f1ff; } .cyan { color:#008fce; background:#e1f8ff; } .violet { color:#7651d7; background:#eee9ff; } .green { color:#0f9d63; background:#e2f8ef; } .benefit-card h3 { margin-bottom:9px; font-size:1rem; } .benefit-card p,.how-grid>div>p,.steps p,.cta-card p { color:var(--muted); font-size:.86rem; line-height:1.65; }
.how-it-works { padding:75px 0; background:var(--surface); } .how-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .how-grid>div>p { max-width:455px; margin-top:18px; font-size:.95rem; } .steps { display:grid; gap:17px; padding:0; margin:0; list-style:none; } .steps li { display:flex; gap:16px; align-items:flex-start; padding:16px; border-radius:12px; background:#fff; } .steps li>span { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; color:#fff; border-radius:10px; background:#176ce0; font-size:.84rem; font-weight:800; } .steps h3 { margin:2px 0 4px; font-size:.95rem; } .steps p { margin:0; }
.cta-section { padding:76px 0; background:linear-gradient(120deg,#0d3572,#076dca); } .cta-card { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:42px 48px; border:1px solid #78c5ff55; border-radius:22px; background:linear-gradient(130deg,#ffffff10,#43a9f825); } .cta-card .section-label { color:#9ed8ff; } .cta-card h2 { color:#fff; } .cta-card p { margin:11px 0 0; color:#d5eaff; } .primary-button.light { color:#1253aa; background:#fff; box-shadow:none; } .primary-button.light small { color:#647b9c; } .desk-footer { padding:23px 0; color:#95a9c6; background:#081a35; font-size:.79rem; } .desk-footer .desk-container { display:flex; justify-content:space-between; gap:15px; } .desk-footer a { color:#dceaff; text-decoration:none; }
@media(max-width:900px) { .hero { padding:65px 0 50px; } .hero-grid,.how-grid { grid-template-columns:1fr; gap:35px; } .hero-visual { width:min(480px,100%); margin:auto; } .benefit-grid { grid-template-columns:repeat(2,1fr); } .cta-card { padding:34px; } }
@media(max-width:580px) { .desk-container,.desk-header .desk-container { width:min(100% - 28px,1140px); } .desk-header { height:64px; } .brand img { max-width:154px; max-height:32px; } .home-link { display:none; } .header-actions { gap:0; } .header-actions .download-link { padding:8px 10px; font-size:.75rem; } h1 { font-size:2.35rem; } .hero-actions { align-items:stretch; flex-direction:column; gap:14px; } .primary-button { justify-content:center; } .secondary-button { text-align:center; } .hero-visual { min-height:298px; } .main-card { height:208px; top:50px; left:4px; } .back-card { width:210px; height:145px; } .connection-pill { right:0; bottom:17px; } .benefit-grid { grid-template-columns:1fr; } .benefit-card { min-height:auto; } .cta-card { align-items:flex-start; flex-direction:column; padding:29px 22px; gap:24px; } .desk-footer .desk-container { align-items:flex-start; flex-direction:column; } }