@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink: #211c2e; --lilac: #7f54b3; --lilac-dark: #68418e; --pale-lilac: #f3edf9; --surface: #f8f7fa; --paper: #fff; --soft-blue: #eaf8fe; --muted: #655f70; --line: #e7e3ec; --pink: #e82d6c; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--surface); font-family: 'DM Sans', Arial, sans-serif; } a { color: inherit; text-decoration: none; } .skip-link { position: absolute; left: -999px; } .skip-link:focus { z-index: 10; left: 1rem; top: 1rem; padding: .75rem; background: var(--pale-lilac); }
.site-header { min-height: 94px; padding: 22px clamp(24px, 5vw, 78px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); gap: 24px; background: rgba(255,255,255,.94); } .brand { font-size: 24px; font-weight: 700; letter-spacing: -1.7px; color: var(--lilac); display: inline-flex; align-items: center; gap: 9px; } .brand > span:last-child > span { font-weight: 400; } .brand-symbol { display: grid; place-items: center; width: 27px; height: 27px; color: var(--paper); font: 600 21px/1 'Playfair Display', serif; letter-spacing: -2px; background: var(--lilac); border-radius: 50% 50% 44% 50%; } nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; } nav a:hover { color: var(--lilac); }
.hero { position: relative; overflow: hidden; min-height: 645px; max-width: 1440px; margin: 0 auto; padding: clamp(56px, 9vw, 135px) clamp(24px, 7vw, 112px) clamp(70px, 8vw, 118px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 8vw, 128px); align-items: center; background: linear-gradient(135deg, var(--paper) 0%, var(--paper) 43%, #f9ebfa 100%); border-radius: 0 0 60px 60px; } .hero::after { content: ''; position: absolute; z-index: 0; width: 400px; height: 360px; left: -130px; bottom: -235px; border-radius: 50%; background: var(--soft-blue); filter: blur(12px); } .hero-copy, .store-preview { position: relative; z-index: 1; } .eyebrow { margin: 0 0 19px; font: 11px/1.2 'DM Mono', monospace; letter-spacing: .11em; text-transform: uppercase; color: var(--lilac); } h1, h2 { margin: 0; font-weight: 600; letter-spacing: -3.7px; line-height: .97; } h1 { font-size: clamp(53px, 6.7vw, 98px); } h1 > span { color: var(--lilac); } h2 { font-size: clamp(40px, 4.5vw, 68px); } em { font-family: 'Playfair Display', serif; font-weight: 500; } .lede { max-width: 570px; margin: 25px 0 18px; font-size: 18px; line-height: 1.55; color: var(--muted); } .hero-includes { display: flex; flex-wrap: wrap; gap: 8px; max-width: 600px; margin-bottom: 28px; } .hero-includes span { padding: 8px 10px; border: 1px solid #ddd1ec; border-radius: 99px; background: rgba(255,255,255,.7); color: var(--lilac-dark); font-size: 11px; font-weight: 600; }.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 16px 20px; border: 0; border-radius: 6px; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; } .button-primary { background: var(--lilac); color: var(--paper); } .button-primary:hover { background: var(--lilac-dark); } .purchase-note { font: 11px 'DM Mono', monospace; color: var(--muted); }
.store-preview { overflow: hidden; min-width: 0; box-shadow: 14px 14px 0 #eadff1; background: var(--paper); border: 1px solid #e6dfeb; border-radius: 14px; } .preview-top, .preview-footer { min-height: 57px; padding: 0 19px; display: flex; align-items: center; gap: 9px; font-size: 11px; border-bottom: 1px solid #eeeaf1; } .preview-logo { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lilac); color: var(--paper); font: 600 15px 'Playfair Display'; } .preview-status { margin-left: auto; color: var(--lilac); font-weight: 600; } .preview-main { min-height: 335px; display: grid; grid-template-columns: 1fr 1fr; background: #f2edf6; gap: 1px; }.preview-product { position: relative; padding: 19px; display: flex; flex-direction: column; justify-content: end; gap: 3px; background: #f2ebf6; font-size: 14px; }.preview-product small { color: var(--muted); }.product-b { background: #e7f6fc; }.preview-product > span { position: absolute; top: 18px; left: 18px; padding: 5px 6px; color: var(--paper); font: 8px 'DM Mono'; background: var(--lilac); }.product-shape { margin: auto; width: 68%; aspect-ratio: 1; }.shape-a { border-radius: 45% 45% 42% 42%; background: #b995d0; border: 19px solid #d9c4e8; box-shadow: inset 0 0 0 2px #9b75ba; }.shape-b { border-radius: 48% 52% 34% 31%; background: #e82d6c; transform: rotate(-12deg); box-shadow: 17px 20px 0 #bce9f6; }.preview-footer { border: 0; justify-content: space-between; color: var(--muted); }.preview-footer button { border: 0; border-radius: 4px; color: var(--paper); background: var(--lilac); padding: 9px 11px; font: 11px 'DM Sans'; }
.statement { padding: 104px 25px; color: var(--ink); text-align: center; background: var(--pale-lilac); }.statement p { margin: 0; font-size: clamp(28px, 3.7vw, 54px); letter-spacing: -2px; line-height: 1.08; }.section { padding: clamp(72px, 9vw, 134px) clamp(24px, 7vw, 112px); background: var(--paper); }.section-heading { max-width: 760px; margin-bottom: 58px; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.feature-grid article { min-height: 256px; padding: 27px 30px 27px 0; border-bottom: 1px solid var(--line); }.feature-grid article:not(:nth-child(3n)) { margin-right: 28px; border-right: 1px solid var(--line); }.feature-grid article:not(:nth-child(3n + 1)) { padding-left: 29px; }.feature-number { display: block; margin-bottom: 45px; color: var(--lilac); font: 10px 'DM Mono'; } h3 { margin: 0 0 11px; font-size: 19px; letter-spacing: -.7px; } .feature-grid p { max-width: 280px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.fit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 100px; color: var(--ink); background: linear-gradient(120deg, #ece2f5, #e3f6fd); }.fit .eyebrow { color: var(--lilac); }.fit ul { margin: 0; padding: 0; list-style: none; }.fit li { padding: 20px 0; display: grid; grid-template-columns: 49px 1fr; border-top: 1px solid rgba(127,84,179,.24); font-size: 17px; line-height: 1.35; }.fit li span { color: var(--lilac); font: 10px 'DM Mono'; }.closing { padding: 132px 24px; text-align: center; background: var(--lilac); color: var(--paper); }.closing .eyebrow { color: #ead9ff; }.closing h2 { font-size: clamp(47px, 5.2vw, 75px); }.closing > p:not(.eyebrow) { max-width: 470px; margin: 26px auto; color: #f0e8fa; line-height: 1.55; }.button-muted { color: #73559c; background: var(--paper); cursor: not-allowed; }.button-muted span { font: 10px 'DM Mono'; text-transform: uppercase; }
footer { padding: 34px clamp(24px, 5vw, 78px); display: flex; align-items: center; gap: 24px; color: #8f849d; background: #211c2e; font-size: 12px; } footer .brand { color: var(--paper); font-size: 20px; } footer .brand-symbol { width: 23px; height: 23px; font-size: 18px; color: var(--paper); background: var(--lilac); } footer span:last-child { margin-left: auto; }
@media (max-width: 760px) { .site-header { min-height: 75px; padding: 18px 22px; } .site-header nav { display: none; } .hero { grid-template-columns: 1fr; padding-top: 72px; } .store-preview { max-width: 540px; width: 100%; } .feature-grid { grid-template-columns: 1fr; }.feature-grid article, .feature-grid article:not(:nth-child(3n)) { margin: 0; padding: 24px 0; border-right: 0; }.feature-grid article:not(:nth-child(3n + 1)) { padding-left: 0; }.feature-number { margin-bottom: 23px; }.fit { grid-template-columns: 1fr; gap: 48px; } footer { flex-wrap: wrap; } footer span:last-child { margin-left: 0; } }