:root { --navy:#10283d; --blue:#1686d9; --sky:#e8f6ff; --yellow:#ffc928; --orange:#ff7d30; --green:#28b76b; --ink:#1e3445; --muted:#6d7c87; --paper:#f8fbfd; --line:#dce9ef; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.65 Arial,sans-serif; } a { color:inherit; } .container { width:min(1160px,calc(100% - 40px)); margin:auto; } .top { background:var(--navy); color:white; font-size:12px; } .top .container { display:flex; justify-content:space-between; padding:8px 0; } .status { color:#bceccb; } .status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--green); } header { background:white; border-bottom:1px solid var(--line); } header .container { display:flex; align-items:center; justify-content:space-between; min-height:76px; } .brand { display:flex; align-items:center; gap:10px; color:var(--navy); font-size:22px; font-weight:800; letter-spacing:-1px; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px 11px 11px 2px; background:linear-gradient(135deg,var(--blue),#50bdf7); color:white; font-size:17px; } .brand b { color:var(--blue); } nav { display:flex; gap:23px; } nav a { color:#536674; font-size:13px; font-weight:700; text-decoration:none; } nav a:hover,nav a.active { color:var(--blue); } .nav-button,.button { display:inline-block; padding:11px 17px; border:0; background:var(--orange); color:white; font:700 13px Arial,sans-serif; text-decoration:none; cursor:pointer; box-shadow:0 6px 14px rgba(255,125,48,.2); } .nav-button:hover,.button:hover { background:#e85e13; } .hero { overflow:hidden; background:linear-gradient(115deg,var(--navy) 0%,#164c70 57%,var(--blue) 100%); color:white; } .hero .container { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:470px; } .hero-copy { padding:75px 0; } .eyebrow { margin:0 0 12px; color:var(--yellow); font-size:11px; font-weight:700; letter-spacing:1.8px; } h1,h2,h3,p { margin-top:0; } h1 { max-width:620px; margin-bottom:20px; font-size:clamp(39px,5vw,62px); line-height:1.05; letter-spacing:-2.2px; } h1 span { color:var(--yellow); } .hero-copy > p:not(.eyebrow) { max-width:520px; color:#d7edf9; font-size:17px; } .hero-actions { display:flex; align-items:center; gap:24px; margin-top:30px; }.hero .button { background:var(--yellow); color:var(--navy); box-shadow:none; }.hero .button:hover { background:#ffe17c; }.hero-link { color:white; font-size:13px; font-weight:700; text-decoration:none; }.hero-link span { margin-left:8px; color:var(--yellow); }.visual { position:relative; height:380px; }.mac { position:absolute; top:20px; left:30px; width:620px; max-width:115%; height:auto; filter:drop-shadow(0 20px 18px rgba(0,0,0,.28)); }.banner { position:absolute; top:48px; left:148px; width:390px; max-width:66%; }.hero-note { position:absolute; right:0; bottom:43px; padding:11px 15px; border-left:3px solid var(--green); background:rgba(12,42,63,.9); font-size:12px; }.hero-note strong { color:#8ff0bc; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }.stats div { padding:23px 25px; background:white; text-align:center; }.stats strong,.stats span { display:block; }.stats strong { color:var(--blue); font-size:24px; }.stats span { color:var(--muted); font-size:12px; }.section { padding:85px 0; }.heading { max-width:600px; margin:auto auto 42px; text-align:center; }.heading .eyebrow { color:var(--orange); }.heading h2 { margin-bottom:12px; color:var(--navy); font-size:37px; letter-spacing:-1.4px; }.heading p:last-child { color:var(--muted); }.services { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }.service { position:relative; min-height:275px; padding:26px; overflow:hidden; background:white; border:1px solid var(--line); text-decoration:none; transition:transform .2s,box-shadow .2s; }.service:hover { transform:translateY(-6px); box-shadow:0 17px 28px rgba(30,74,100,.13); }.service i { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--sky); color:var(--blue); font-size:21px; font-style:normal; }.service:nth-child(2) i { background:#fff4d2; color:#dc9513; }.service:nth-child(3) i { background:#e3f9ec; color:var(--green); }.service:nth-child(4) i { background:#fff0e8; color:var(--orange); }.service h3 { margin:27px 0 8px; color:var(--navy); font-size:20px; }.service p { color:var(--muted); font-size:13px; }.service b { position:absolute; bottom:21px; color:var(--blue); font-size:12px; }.section.tint { background:var(--sky); }.features { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.feature { padding:25px; background:white; border-top:4px solid var(--yellow); }.feature:nth-child(2) { border-color:var(--green); }.feature:nth-child(3) { border-color:var(--orange); }.feature h3 { color:var(--navy); }.feature p { color:var(--muted); }.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.testimonial { padding:26px; background:white; border:1px solid var(--line); }.stars { color:#f5ae12; letter-spacing:2px; }.testimonial blockquote { margin:17px 0; color:#445767; font-size:14px; }.customer { display:flex; align-items:center; gap:10px; }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--blue); color:white; font-size:12px; font-weight:700; }.testimonial:nth-child(2) .avatar { background:var(--green); }.testimonial:nth-child(3) .avatar { background:var(--orange); }.customer strong,.customer span { display:block; }.customer strong { font-size:12px; }.customer span { color:var(--muted); font-size:11px; }.cta { background:linear-gradient(120deg,#1b83ce,var(--blue)); color:white; }.cta .container { display:flex; align-items:center; justify-content:space-between; padding:50px 0; }.cta h2 { margin:0; font-size:31px; }.cta p { margin:6px 0 0; color:#dff2ff; }.cta .button { background:var(--yellow); color:var(--navy); box-shadow:none; } footer { padding:45px 0 20px; background:var(--navy); color:#c9d8e2; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:35px; }.footer-grid .brand { color:white; }.footer-grid p { max-width:310px; margin-top:13px; font-size:13px; }.footer-grid h3 { color:var(--yellow); font-size:12px; letter-spacing:1px; }.footer-grid a { display:block; margin:7px 0; color:#c9d8e2; font-size:13px; text-decoration:none; }.copyright { margin-top:35px; padding-top:15px; border-top:1px solid #29465a; color:#88a0ae; font-size:11px; }.page-hero { padding:64px 0; background:linear-gradient(115deg,var(--navy),#185c83); color:white; }.page-hero .container { max-width:900px; text-align:center; }.page-hero h1 { max-width:none; margin-bottom:13px; font-size:45px; }.page-hero p:last-child { margin:0; color:#d9ecf7; font-size:16px; }.pricing-section { padding:70px 0 90px; }.intro { max-width:790px; margin:0 auto 38px; color:#506373; text-align:center; }.price-table { width:100%; border-collapse:collapse; background:white; box-shadow:0 12px 32px rgba(26,69,96,.08); }.price-table th,.price-table td { padding:15px 11px; border:1px solid var(--line); text-align:center; }.price-table thead th { background:var(--navy); color:white; font-size:13px; }.price-table tbody th { background:#f1f7fa; color:var(--navy); text-align:left; }.price-table td { color:#536674; font-size:13px; }.price-table .button { padding:8px 10px; font-size:11px; box-shadow:none; }.table-wrap { overflow-x:auto; }.plan-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:19px; }.plan-card { position:relative; padding:29px; background:white; border:1px solid var(--line); }.plan-card.featured { border:2px solid var(--green); box-shadow:0 12px 26px rgba(40,183,107,.13); }.tag { position:absolute; top:-13px; right:18px; padding:4px 9px; background:var(--green); color:white; font-size:10px; font-weight:700; }.plan-card h2 { margin:0; color:var(--navy); font-size:25px; }.price { margin:13px 0 21px; color:var(--blue); font-size:37px; font-weight:700; }.price small { color:var(--muted); font-size:12px; font-weight:400; }.plan-card ul { min-height:115px; padding:0; list-style:none; color:#5d6e79; font-size:13px; }.plan-card li { padding:6px 0; border-bottom:1px solid #edf2f4; }.plan-card li::before { content:"✓"; margin-right:8px; color:var(--green); font-weight:700; }.locations { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; margin:35px 0; }.location { padding:16px 12px; border:1px solid var(--line); background:white; color:var(--navy); font-size:13px; font-weight:700; text-align:center; }.vps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.vps-card { padding:25px; background:white; border:1px solid var(--line); }.vps-card h3 { color:var(--navy); font-size:20px; }.vps-card strong { color:var(--orange); font-size:27px; }.vps-card p { color:var(--muted); font-size:13px; }.vps-card .button { width:100%; margin-top:8px; text-align:center; box-shadow:none; } @media(max-width:820px) { .top .container { justify-content:center; }.top .container span:last-child { display:none; } nav { display:none; }.container { width:min(100% - 28px,1160px); }.hero .container { grid-template-columns:1fr; }.hero-copy { padding:58px 0 25px; }.visual { height:300px; }.mac { top:20px; left:8%; width:540px; }.banner { top:44px; left:26%; width:340px; }.stats,.services,.features,.testimonials,.plan-cards,.vps-grid { grid-template-columns:1fr; }.stats { gap:0; }.stats div { border-bottom:1px solid var(--line); }.cta .container { display:block; text-align:center; }.cta .button { margin-top:20px; }.footer-grid { grid-template-columns:1fr; }.locations { grid-template-columns:repeat(2,1fr); }.page-hero h1 { font-size:35px; }.section { padding:60px 0; } }