:root { --ink:#10201c; --green:#0f6b57; --plaster:#f4f1ec; --cream:#fcfaf7; --slate:#66716d; --line:#d9d8d2; --mono:"DM Mono",monospace; --sans:"DM Sans",sans-serif; --serif:"Playfair Display",serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--plaster); font-family:var(--sans); } .grain { pointer-events:none; position:fixed; inset:0; opacity:.25; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); } a { color:inherit; text-decoration:none; } .site-header { height:86px; max-width:1360px; padding:0 48px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; } .brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:700; letter-spacing:-.8px; } .brand img { height:29px; width:29px; object-fit:contain; border-radius:8px; } nav { display:flex; gap:34px; font-size:14px; font-weight:500; color:#45504b; } nav a:hover,.legal-links a:hover { color:var(--green); } .button { background:var(--green); color:#fff; padding:15px 19px; display:inline-flex; gap:20px; align-items:center; justify-content:space-between; border-radius:3px; font-size:14px; font-weight:600; transition:transform .2s,background .2s; } .button:hover { background:#095343; transform:translateY(-2px); } .button span { font-size:18px; line-height:12px; } .button-small { padding:11px 14px; font-size:13px; gap:13px; } .hero { min-height:700px; max-width:1360px; margin:auto; padding:77px 72px 100px; display:grid; grid-template-columns:1fr 1.05fr; gap:58px; align-items:center; overflow:hidden; } .eyebrow { margin:0 0 20px; font:500 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:9px; } .eyebrow span { display:inline-block; width:19px; height:1px; background:currentColor; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(49px,5.6vw,82px); line-height:.98; letter-spacing:-.065em; margin-bottom:28px; font-weight:600; } h1 em,h2 em { font-family:var(--serif); font-weight:600; letter-spacing:-.06em; } .hero-description { max-width:430px; color:var(--slate); font-size:17px; line-height:1.6; margin-bottom:31px; } .hero-actions { display:flex; gap:24px; align-items:center; } .text-link { font-size:14px; font-weight:600; border-bottom:1px solid #a6ada9; padding-bottom:5px; } .text-link:hover { color:var(--green); border-color:var(--green); } .text-link b { padding-left:8px; font-size:16px; } .trust-line { display:flex; align-items:center; gap:9px; color:var(--slate); font-size:12px; margin-top:30px; } .avatars { color:#bc8e59; background:#e8d4bf; width:25px; height:25px; border-radius:50%; display:grid; place-content:center; }
.hero-visual { position:relative; height:515px; } .hero-image-wrap { position:absolute; width:86%; height:100%; left:3%; overflow:hidden; border-radius:180px 180px 10px 10px; background:#ddd; box-shadow:18px 20px 0 #d9e2d8; } .hero-image-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-before { clip-path:inset(0 51% 0 0); } .hero-after { clip-path:inset(0 0 0 49%); } .slider-line { position:absolute; width:2px; background:white; top:0; bottom:0; left:49%; box-shadow:0 0 4px #333; } .slider-line span { position:absolute; width:32px; height:32px; border-radius:50%; background:#fff; left:-15px; top:46%; box-shadow:0 2px 10px #0003; } .slider-line span:after { content:"↔"; color:var(--ink); font-size:16px; position:absolute; left:7px; top:5px; } .image-label { z-index:2; position:absolute; top:21px; color:#fff; background:#10201caa; padding:6px 10px; border-radius:30px; text-transform:uppercase; font:500 9px var(--mono); letter-spacing:.11em; } .before-label { left:22px; } .after-label { right:22px; } .floating-note { position:absolute; z-index:3; bottom:31px; right:0; background:#fffdf9; width:195px; padding:14px 16px; border-radius:4px; box-shadow:0 12px 30px #1b30261e; display:flex; align-items:center; gap:10px; } .floating-note small { display:block; font:500 8px var(--mono); color:var(--slate); letter-spacing:.08em; margin-bottom:4px; }.floating-note strong { font-size:12px; }.note-dot { width:11px; height:11px; border-radius:50%; background:var(--green); }.arch { position:absolute; border:1px solid #92a99e; border-bottom:0; border-radius:90px 90px 0 0; width:155px; height:80px; opacity:.6; }.arch-one { right:-35px; top:28px; }.arch-two { right:-76px; top:46px; }
.marquee { color:#f4f1ec; background:var(--green); padding:17px 0 15px; overflow:hidden; white-space:nowrap; font:500 13px var(--mono); letter-spacing:.11em; }.marquee div { width:max-content; animation:slide 25s linear infinite; }.marquee i { color:#d3ad69; font-style:normal; padding:0 24px; } @keyframes slide { to { transform:translateX(-50%); } }
.intro { max-width:1160px; margin:auto; padding:127px 40px 60px; display:grid; grid-template-columns:1fr .75fr; gap:60px; align-items:end; }.intro h2,.privacy-promise h2,.support h2 { font-size:clamp(39px,4vw,58px); line-height:1.06; letter-spacing:-.055em; margin:0; font-weight:600; }.intro-copy { color:var(--slate); line-height:1.65; font-size:16px; max-width:360px; margin:0 0 7px; }.steps { max-width:1160px; margin:auto; padding:26px 40px 145px; display:grid; grid-template-columns:repeat(3,1fr); gap:27px; }.step-number { border-top:1px solid #b9c0ba; padding:13px 0; margin-bottom:14px; color:var(--green); font:500 11px var(--mono); }.step-image { height:315px; position:relative; overflow:hidden; background:#e5e2da; }.step-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }.step-image:hover img { transform:scale(1.04); }.step-image:nth-of-type(2) img { object-position:center; }.upload-card,.style-chip,.render-chip { position:absolute; background:#fffdfa; padding:10px 12px; border-radius:4px; bottom:14px; left:14px; font-size:11px; box-shadow:0 5px 16px #12251b26; }.upload-card { top:47%; bottom:auto; left:50%; transform:translate(-50%,-50%); display:flex; gap:8px; align-items:center; white-space:nowrap; }.upload-card:first-letter { color:var(--green); font-size:18px; }.style-chip { background:#1b2723d9; color:white; }.render-chip { background:var(--green); color:white; }.steps h3 { font-size:20px; letter-spacing:-.04em; margin:18px 0 8px; }.steps p { color:var(--slate); font-size:14px; line-height:1.5; }
.showcase { background:var(--ink); color:#f7f5ef; padding:110px max(40px,calc((100vw - 1160px)/2)); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }.eyebrow.light { color:#d3ad69; }.showcase h2 { font-size:clamp(45px,4.9vw,70px); line-height:.99; letter-spacing:-.06em; font-weight:600; margin:0 0 28px; }.showcase-copy>p:not(.eyebrow) { color:#b8c1bc; line-height:1.62; max-width:370px; font-size:16px; margin-bottom:30px; }.button-cream { color:var(--ink); background:#f4f1ec; }.button-cream:hover { background:#fff; }.showcase-grid { height:486px; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:13px; }.showcase-grid img { width:100%; height:100%; object-fit:cover; }.showcase-tall { grid-row:span 2; }.privacy-promise { max-width:1160px; margin:auto; padding:130px 40px; display:grid; grid-template-columns:100px 1.3fr .8fr; gap:25px; align-items:center; }.promise-mark { font-size:55px; color:#bc8e59; }.privacy-promise>p { color:var(--slate); font-size:14px; line-height:1.6; margin:0; }.privacy-promise .text-link { grid-column:3; width:max-content; margin-top:-58px; }.support { background:#dde6db; max-width:1280px; margin:0 auto 55px; padding:83px 90px; display:flex; justify-content:space-between; align-items:center; gap:30px; }.support>div>p:not(.eyebrow) { color:var(--slate); font-size:15px; max-width:400px; line-height:1.6; margin:16px 0 0; }.support-email { font-size:20px; font-weight:600; border-bottom:2px solid var(--green); padding:10px 0; display:flex; gap:25px; white-space:nowrap; }.support-email b { color:var(--green); }
footer { background:var(--ink); color:#f4f1ec; padding:45px max(40px,calc((100vw - 1160px)/2)) 25px; }.footer-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:48px; }.brand-footer img { border-radius:8px; }.footer-top>p { color:#aab6ae; font-size:14px; margin:0; }.footer-bottom { border-top:1px solid #405048; padding-top:23px; display:flex; justify-content:space-between; font-size:11px; color:#aab6ae; }.footer-bottom p { margin:0; }.legal-links { display:flex; gap:22px; }.legal { max-width:820px; margin:auto; padding:90px 40px 55px; border-bottom:1px solid var(--line); scroll-margin-top:10px; }.legal:last-of-type { border-bottom:0; padding-bottom:110px; }.legal h2 { font-size:46px; letter-spacing:-.05em; line-height:1.05; margin-bottom:23px; }.legal>p:last-child { color:#4d5953; font-size:15px; line-height:1.75; max-width:730px; }.legal a { color:var(--green); text-decoration:underline; }
@media (max-width:800px) { .site-header { padding:0 22px; height:72px; } nav { display:none; }.hero { padding:45px 24px 75px; grid-template-columns:1fr; gap:40px; }.hero-visual { height:450px; }.hero-image-wrap { width:88%; left:0; }.intro { padding:80px 24px 34px; grid-template-columns:1fr; gap:22px; }.steps { padding:20px 24px 80px; grid-template-columns:1fr; gap:30px; }.step-image { height:390px; }.showcase { padding:76px 24px; grid-template-columns:1fr; gap:42px; }.showcase-grid { height:390px; }.privacy-promise { padding:80px 24px; grid-template-columns:55px 1fr; }.promise-mark { font-size:38px; }.privacy-promise>p,.privacy-promise .text-link { grid-column:2; }.privacy-promise .text-link { margin-top:0; }.support { margin:0; padding:60px 24px; display:block; }.support-email { display:inline-flex; margin-top:28px; font-size:16px; }.footer-top { display:grid; gap:23px; justify-content:start; }.footer-bottom { display:block; }.legal-links { margin-top:18px; flex-wrap:wrap; gap:13px 18px; }.legal { padding:70px 24px 30px; }.legal h2 { font-size:39px; } }
@media (max-width:420px) { .button-small { padding:10px; }.site-header .button { font-size:0; gap:0; }.site-header .button span { font-size:18px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }.hero-visual { height:385px; }.floating-note { right:-4px; bottom:18px; }.step-image { height:310px; } }
.policy-page { max-width:1160px; margin:auto; padding:78px 40px 130px; }.policy-hero { border-bottom:1px solid var(--line); padding-bottom:65px; }.policy-kicker { font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0 0 19px; }.policy-hero h1 { max-width:850px; margin:0 0 27px; }.policy-hero>p:last-child { color:var(--slate); font:500 12px var(--mono); }.policy-content { max-width:720px; padding-top:58px; }.policy-lead { font-size:21px !important; color:var(--ink) !important; line-height:1.55 !important; margin-bottom:52px !important; }.policy-content h2 { font-size:24px; letter-spacing:-.035em; margin:37px 0 10px; }.policy-content p { color:#4d5953; font-size:15px; line-height:1.75; margin-bottom:0; }.policy-content a { color:var(--green); text-decoration:underline; }.rating-badge { width:92px; height:92px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; border-radius:8px; font:600 48px var(--sans); letter-spacing:-.09em; margin:0 0 26px; }.rating-badge span { font-size:23px; align-self:flex-start; padding-top:16px; margin-left:3px; } @media (max-width:800px) { .policy-page { padding:55px 24px 80px; }.policy-hero { padding-bottom:43px; }.policy-content { padding-top:38px; } }