:root { --ink:#101014; --carbon:#1c1c24; --steel:#e2e2e8; --muted:#9b9ca8; --purple:#9e72ff; --violet:#6d35d9; --line:rgba(216,217,224,.17); --display:"Eurostile Extended","Eurostile","Bank Gothic","Avenir Next",sans-serif; --text:"Avenir Next","Trebuchet MS",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--steel); background:radial-gradient(circle at 85% 0,rgba(109,53,217,.2),transparent 30%),var(--ink); font-family:var(--text); } a { color:inherit; text-decoration:none; } .wrap { width:min(1120px,calc(100% - 48px)); margin:auto; } nav { min-height:92px; display:flex; align-items:center; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:1rem; font-weight:800; letter-spacing:.18em; } .brand img { width:42px; height:35px; object-fit:contain; mix-blend-mode:screen; filter:contrast(1.15); } .nav-menu { display:flex; gap:21px; margin-left:auto; margin-right:34px; } .nav-link { color:var(--muted); font-family:var(--display); font-size:.64rem; font-weight:700; letter-spacing:.12em; white-space:nowrap; } .nav-link:hover,.active { color:#fff; } .pricing-link { color:#f3f2f6; border:1px solid rgba(158,114,255,.65); padding:10px 14px; } .hero { min-height:420px; display:grid; align-content:center; padding:70px 0; border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 18px; color:var(--purple); font-family:var(--display); font-size:.7rem; font-weight:800; letter-spacing:.22em; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); text-transform:uppercase; } h1 { max-width:850px; margin-bottom:21px; color:#f7f7fa; font-size:clamp(3rem,7vw,6.4rem); line-height:.9; letter-spacing:-.045em; } h2 { font-size:clamp(1.7rem,3.4vw,3rem); line-height:1; letter-spacing:-.03em; } .lead { max-width:620px; color:#bebec8; font-size:1.12rem; line-height:1.55; } main { padding:92px 0 115px; } .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .card { min-height:220px; padding:30px; background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.015)); } .number { color:var(--purple); font-family:var(--display); font-size:.7rem; font-weight:800; letter-spacing:.16em; } h3 { margin:42px 0 10px; font-size:1.05rem; letter-spacing:.04em; } p { color:var(--muted); font-size:.95rem; line-height:1.58; } .panel { padding:42px; border:1px solid rgba(158,114,255,.55); background:linear-gradient(135deg,rgba(109,53,217,.2),rgba(255,255,255,.035)); } .price { color:#fff; font-family:var(--display); font-size:clamp(3.8rem,8vw,6.5rem); font-weight:800; letter-spacing:-.075em; line-height:.84; } .price small { display:block; color:var(--muted); font-size:.75rem; letter-spacing:.15em; margin-top:16px; } .button { display:inline-flex; align-items:center; min-height:52px; margin-top:18px; padding:0 25px; background:linear-gradient(110deg,#6d35d9,#a374ff); color:#fff; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.14em; box-shadow:0 12px 32px rgba(109,53,217,.3); } .list { display:grid; gap:0; border-top:1px solid var(--line); } .list div { display:grid; grid-template-columns:130px 1fr; gap:25px; padding:23px 0; border-bottom:1px solid var(--line); } .list strong { color:#f1f1f5; font-family:var(--display); font-size:.8rem; letter-spacing:.11em; } footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-family:var(--display); font-size:.68rem; letter-spacing:.08em; } @media (max-width:900px) { .nav-menu { display:none; } .nav-contact { margin-left:auto; } } @media (max-width:720px) { .wrap { width:min(100% - 32px,1120px); } nav { min-height:74px; } .nav-contact { display:none; } .hero { min-height:360px; padding:55px 0; } main { padding:65px 0 84px; } .grid { grid-template-columns:1fr; } .panel { padding:28px; } .list div { grid-template-columns:1fr; gap:8px; } }