:root { --ink:#17264c; --muted:#5c6b88; --cream:#fffaf0; --orange:#ff9d3d; --purple:#7056e8; --teal:#52c9bc; --card:#fff; } * { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:Inter,ui-rounded,"Segoe UI",sans-serif; } .site-header { width:min(1120px,calc(100% - 32px)); margin:0 auto; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:22px; } .brand { color:var(--ink); text-decoration:none; font-weight:900; font-size:1.17rem; display:flex; align-items:center; gap:9px; } .brand-mark { background:var(--purple); color:#fff; height:35px; width:35px; border-radius:12px; display:grid; place-items:center; box-shadow:3px 3px 0 #d7d1ff; } .site-nav { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .site-nav a { text-decoration:none; color:var(--muted); padding:9px 12px; border-radius:10px; font-weight:750; font-size:.94rem; } .site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--ink); background:#fff; } main { width:min(1120px,calc(100% - 32px)); margin:0 auto 50px; } .hero { min-height:510px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:34px; padding:58px 6% 50px; border-radius:32px; background:linear-gradient(136deg,#eef0ff 0%,#f8edff 55%,#fff7dd 100%); overflow:hidden; } .eyebrow { color:#7359d4; font-size:.75rem; letter-spacing:.16em; font-weight:900; margin:0 0 13px; } h1 { font-size:clamp(2.35rem,5vw,4.45rem); line-height:1.03; margin:0; letter-spacing:-.055em; max-width:620px; } .page-copy { color:var(--muted); font-size:1.06rem; line-height:1.72; max-width:610px; margin-top:20px; } .page-copy p { margin:0 0 14px; } .primary-action { display:inline-flex; align-items:center; gap:12px; margin-top:10px; padding:14px 20px; text-decoration:none; border-radius:14px; background:var(--ink); color:#fff; font-weight:850; box-shadow:0 8px 0 #0e1833; } .primary-action:hover { transform:translateY(2px); box-shadow:0 6px 0 #0e1833; } .hero-art { position:relative; height:315px; min-width:280px; } .shape { position:absolute; display:grid; place-items:center; color:#fff; font-weight:900; box-shadow:0 16px 30px #25234b2b; } .circle { width:150px; height:150px; left:25px; top:70px; background:var(--orange); border-radius:50%; font-size:4.3rem; transform:rotate(-10deg); } .square { width:142px; height:142px; right:7px; top:22px; background:var(--purple); border-radius:26px; font-size:4.4rem; transform:rotate(10deg); } .triangle { width:0; height:0; right:65px; bottom:0; border-left:82px solid transparent; border-right:82px solid transparent; border-bottom:142px solid var(--teal); color:#fff; padding-top:82px; font-size:2.35rem; text-indent:-10px; filter:drop-shadow(0 16px 18px #25234b33); } .spark { position:absolute; color:#ffbe36; font-size:2.2rem; }.one { left:5px; top:10px; }.two { right:1px; bottom:20px; color:#e76f94; } .highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:23px; } .highlights article { background:var(--card); padding:25px; border-radius:22px; box-shadow:0 9px 28px #2824510e; }.highlights span { display:inline-grid; place-items:center; min-width:54px; height:42px; padding:0 8px; border-radius:12px; background:#e8f8f5; color:#209b90; font-weight:900; }.highlights h2 { margin:17px 0 7px; font-size:1.3rem; }.highlights p { margin:0; color:var(--muted); line-height:1.5; } .inner-hero { padding:74px 8% 62px; border-radius:30px; background:linear-gradient(135deg,#e7f5ff,#f8eeff); }.content-card { max-width:820px; margin:-25px auto 0; position:relative; background:#fff; padding:clamp(26px,5vw,58px); border-radius:24px; box-shadow:0 12px 35px #27234e15; }.content-card .page-copy { max-width:none; } .screen-showcase { display:grid; gap:25px; margin:48px auto 0; max-width:930px; } .screen-card { display:grid; grid-template-columns:210px minmax(0,1fr); align-items:center; gap:55px; padding:clamp(24px,5vw,54px); border-radius:26px; background:#fff; box-shadow:0 12px 35px #27234e15; } .screen-card:nth-child(even) .phone-frame { order:2; } .phone-frame { width:190px; justify-self:center; padding:9px; background:#17264c; border:5px solid #17264c; border-radius:29px; box-shadow:0 16px 34px #17264c35; line-height:0; } .phone-frame img { width:100%; height:auto; max-height:410px; object-fit:cover; border-radius:16px; } .screen-copy h2 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.04em; } .screen-subtitle { margin:12px 0 0; color:var(--purple); font-size:1.08rem; font-weight:800; } .screen-copy .page-copy { margin-top:15px; } .site-footer { width:min(1120px,calc(100% - 32px)); padding:21px 0 32px; margin:auto; color:var(--muted); display:flex; justify-content:space-between; gap:15px; border-top:1px solid #e8e1d4; font-size:.9rem; }.site-footer a { color:var(--purple); font-weight:700; text-decoration:none; } @media (max-width:720px) { .site-header { min-height:auto; padding:18px 0; align-items:flex-start; flex-direction:column; gap:13px; }.site-nav { width:100%; gap:1px; }.site-nav a { padding:7px 9px; font-size:.82rem; }.hero { grid-template-columns:1fr; padding:42px 7% 20px; gap:8px; min-height:0; }.hero-art { height:255px; transform:scale(.82); transform-origin:center; margin:-14px auto -27px; }.highlights { grid-template-columns:1fr; gap:12px; }.highlights article { padding:20px; }.inner-hero { padding:55px 8% 72px; }.site-footer { flex-direction:column; }.content-card { margin-top:-36px; } .screen-card { grid-template-columns:1fr; gap:25px; padding:28px 24px; }.screen-card:nth-child(even) .phone-frame { order:0; }.phone-frame { width:170px; }.screen-copy { text-align:center; }.screen-copy .page-copy { margin-left:auto; margin-right:auto; } }