:root { --cream:#faf8f2; --ink:#102649; --coral:#e86b53; --line:#e7e1d6; --muted:#6d7582; --lilac:#bca4ce; --sage:#a8b8a3; --mustard:#d8b456; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin:0; } h1,h2,h3,.brand { font-family:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:500; } .site-header { height:82px; max-width:1240px; margin:auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; } .brand { font-size:30px; letter-spacing:-1.4px; font-weight:700; } nav { display:flex; gap:38px; margin-left:auto; margin-right:36px; font-size:14px; font-weight:600; } nav a:hover,.text-link:hover,footer a:hover { opacity:.65; }.button { background:var(--coral); color:white; border-radius:7px; padding:15px 25px; font-size:14px; font-weight:700; display:inline-block; box-shadow:0 5px 12px #d95f4930; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translateY(-2px); box-shadow:0 8px 16px #d95f4940; }.small-button { padding:11px 18px; font-size:13px; }.hero { max-width:1240px; min-height:585px; padding:66px 40px 88px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; overflow:hidden; }.hero-copy { position:relative; z-index:2; }.hero h1 { font-size:clamp(44px,5vw,72px); line-height:1.25; letter-spacing:-.06em; }.hero-copy>p { margin-top:31px; font-size:16px; line-height:2; letter-spacing:.03em; }.actions { display:flex; align-items:center; gap:28px; margin-top:34px; }.text-link { font-weight:700; font-size:14px; }.text-link span { margin-left:8px; font-size:18px; }.hero-visual { height:460px; position:relative; }.phone { width:224px; height:432px; padding:12px 10px; position:relative; border:5px solid #151b21; border-radius:32px; background:#172029; box-shadow:0 25px 40px #15284730; z-index:3; }.phone-notch { width:83px; height:19px; border-radius:12px; background:#151b21; position:absolute; left:50%; top:7px; transform:translateX(-50%); z-index:2; }.phone-screen { background:#fbfaf6; height:100%; border-radius:21px; padding:37px 13px 12px; color:#192845; overflow:hidden; font-family:Arial,sans-serif; }.phone small { display:block; font-size:10px; font-weight:700; margin-bottom:11px; }.phone b { display:block; margin:10px 0 6px; font-size:10px; }.phone b span { float:right; }.knit-piece { height:115px; border-radius:12px; background:repeating-linear-gradient(120deg,#c5afd3 0 3px,#b497c6 4px 6px,#d3c0dd 7px 10px); }.track { height:7px; border-radius:9px; background:#e9e4dc; overflow:hidden; }.track i { display:block; width:48%; height:100%; background:var(--coral); }.swatches { display:flex; gap:8px; }.swatches i,.yarn-row i { width:21px;height:21px;border-radius:50%;display:block;background:repeating-radial-gradient(circle,#cbb4d5 0 2px,#b99cc7 3px 4px); }.swatches i:nth-child(2),.yarn-row:nth-child(3) i { background:repeating-radial-gradient(circle,#e7bf9b 0 2px,#d9a87e 3px 4px); }.swatches i:nth-child(3),.yarn-row:nth-child(4) i { background:repeating-radial-gradient(circle,#b5c5ad 0 2px,#97ae93 3px 4px); }.hero-visual .phone { transform:rotate(3deg); position:absolute; left:31%; top:5px; }.hero-yarn { position:absolute; border-radius:50%; background:repeating-radial-gradient(circle at 50%,#d3c1dc 0 6px,#b99bc9 7px 10px,#c8afd3 12px 14px); box-shadow:inset 2px 0 #ffffff60; }.yarn-a { width:162px;height:162px; right:9%;top:-10px; }.yarn-b { width:104px;height:104px; right:0;top:132px; background:repeating-radial-gradient(circle,#dab85b 0 5px,#cba23a 6px 9px); }.yarn-c { width:115px;height:115px; right:22%;bottom:5px; background:repeating-radial-gradient(circle,#aabda4 0 5px,#93aa90 6px 9px); }.lace { width:350px;height:205px;right:-9%;bottom:14px;position:absolute;opacity:.9;background-image:radial-gradient(ellipse at center,transparent 32%,#efeade 34% 40%,transparent 42%);background-size:28px 25px; transform:rotate(-15deg); }.section { max-width:1240px; margin:auto; padding:118px 40px; }.section h2,.cta h2 { font-size:clamp(33px,3.7vw,53px); line-height:1.35; letter-spacing:-.06em; }.empathy { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }.eyeless-label { font-size:16px; line-height:1.9; color:var(--muted); margin-bottom:28px; }.empathy ul { list-style:none; padding:0; margin:35px 0 0; }.empathy li { padding:13px 0 13px 29px; border-bottom:1px dashed #dfcdbd; position:relative; font-size:15px; }.empathy li::before { content:"✓"; position:absolute; left:0; top:11px; color:var(--coral); border:1px solid #e69b8b; width:17px;height:17px; border-radius:50%; font-size:10px; line-height:16px; text-align:center; }.desk-scene { height:370px; background:#ded8cd; position:relative; overflow:hidden; }.desk-yarn { width:150px;height:150px;border-radius:50%;position:absolute;left:35px;top:30px;background:repeating-radial-gradient(circle,#c6b08d 0 5px,#b69b70 6px 9px); }.notebook { position:absolute; width:210px;height:270px;right:72px;top:50px;background:#f5eddd;box-shadow:10px 12px 22px #4a3e3320;padding:27px;transform:rotate(7deg); }.notebook span { font-family:Georgia,serif; font-style:italic; color:#9d8b70; }.notebook i { display:block; border-bottom:1px solid #c7b699; width:100%; margin-top:24px; }.small-phone { position:absolute; left:110px;bottom:-180px;transform:scale(.56) rotate(-16deg); transform-origin:bottom left; }.features>h2 { text-align:center; margin-bottom:72px; }.feature { min-height:340px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; margin:16px 0; }.feature.reverse { direction:rtl; }.feature.reverse>* { direction:ltr; }.feature-media { height:290px; background:#f1eee6; position:relative; overflow:hidden; display:flex; justify-content:center; align-items:flex-end; }.feature-media>span { position:absolute; top:19px;left:22px;font-size:12px;font-weight:bold;color:var(--coral); }.feature-media .phone { transform:scale(.63); transform-origin:bottom center; height:432px; }.feature-texture { position:absolute;right:0;top:0;width:39%;height:100%;z-index:0; }.feature-texture.project { background:#ded2c6; background-image:radial-gradient(ellipse at center,transparent 33%,#efe7d7 35% 41%,transparent 43%); background-size:25px 23px; }.feature-texture.stash { background:repeating-radial-gradient(circle at 40% 26%,#d7b97a 0 9px,#caa557 10px 14px,#d8c78e 15px 18px); }.feature-texture.patterns { background:#e3d7bf; background-image:linear-gradient(135deg,#bc9d7a33 25%,transparent 25%); background-size:18px 18px; }.feature-texture.progress { background:#c6b0d0; background-image:radial-gradient(ellipse at center,transparent 32%,#d8c6e0 34% 40%,transparent 42%); background-size:26px 24px; }.feature-number { color:var(--coral);font-weight:700;font-size:13px;margin-bottom:16px; }.feature h3 { font-size:35px;letter-spacing:-.05em; }.feature-copy>p:last-child { margin-top:17px;font-size:16px;line-height:1.9;color:#5e697a; }.yarn-row { font-size:10px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #e5dfd4;padding:9px 0; }.yarn-row em { margin-left:auto;font-style:normal;color:#8b9098; }.pattern-thumb { height:74px;border-radius:8px;background:repeating-linear-gradient(125deg,#c6b09c 0 3px,#a98d72 4px 6px,#e2d0ba 7px 10px); }.pattern-thumb.small { height:58px;margin-top:12px; }.check { border-bottom:1px solid #e4dfd6;padding:9px 0;font-size:9px; }.how { background:#fffdf9; max-width:none; position:relative; overflow:hidden; }.how h2 { text-align:center; }.steps { max-width:1030px;margin:54px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:60px;position:relative;z-index:1; }.steps article { text-align:center; }.steps b { color:var(--coral);font-size:15px; }.step-icon { width:92px;height:92px;margin:12px auto 17px;border:1px solid #dbd0c3;border-radius:50%;display:grid;place-items:center;font-size:44px;color:#b9a489; }.step-icon.yarn { color:#ba9fc6;font-size:64px; }.step-icon.needle { color:#ba9fc6;transform:rotate(-28deg); }.steps h3 { font-size:21px;line-height:1.45; }.steps p { font-size:13px;line-height:1.8;color:var(--muted);margin:10px auto;max-width:230px; }.thread { position:absolute;top:305px;left:-5%;width:110%;height:80px;border-top:2px solid #e49080;border-radius:50%;transform:rotate(-3deg); }.use-cases h2 { text-align:center; }.case-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px; }.case-image { height:240px;position:relative;overflow:hidden; }.case-image::before { content:"";position:absolute;inset:0;opacity:.92; }.case-image.first::before { background:radial-gradient(circle at 28% 32%,#baa17f 0 10%,transparent 11%),radial-gradient(circle at 48% 27%,#a9b9ab 0 17%,transparent 18%),repeating-radial-gradient(ellipse at 75% 68%,#e2ddd2 0 7px,#b9a083 8px 11px,#e9e2d7 12px 14px); }.case-image.second::before { background:radial-gradient(circle at 53% 35%,#e7ddb1 0 20%,transparent 21%),repeating-linear-gradient(125deg,#d6b14c 0 4px,#e1c566 5px 7px,#f0dc96 8px 12px); }.case-image.third::before { background:radial-gradient(circle at 28% 38%,#c4b0d0 0 18%,transparent 19%),radial-gradient(circle at 58% 34%,#d7b378 0 17%,transparent 18%),radial-gradient(circle at 78% 52%,#a9bca5 0 17%,transparent 18%),#e8dfd4; }.case-grid h3 { text-align:center;font-size:21px;margin-top:20px; }.case-grid p { color:var(--muted);font-size:13px;line-height:1.8;text-align:center;margin:10px auto;max-width:310px; }.faq { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start; }.faq-list { border-top:1px solid var(--line); }.faq-list article { border-bottom:1px solid var(--line); }.faq button { width:100%;border:0;background:transparent;color:var(--ink);font:600 15px Arial,sans-serif;text-align:left;padding:21px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer; }.chevron { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s; }.chevron.open { transform:rotate(180deg); }.faq-list p { color:var(--muted);font-size:14px;line-height:1.8;padding:0 32px 22px 0; }.cta { background:var(--ink);color:#fff;min-height:450px;padding:86px max(40px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;position:relative;overflow:hidden; }.cta h2 { color:#fff; }.cta p { margin:22px 0 31px;font-size:16px;color:#dbe0e9; }.button.light { background:var(--coral); }.cta-craft { position:relative;width:390px; }.cta-yarn { width:180px;height:180px;border-radius:50%;position:absolute;right:50px;top:2px;background:repeating-radial-gradient(circle,#cdb5d6 0 7px,#b496c2 8px 11px); }.cta-lace { position:absolute;width:350px;height:250px;right:-45px;bottom:-67px;opacity:.78;background-image:radial-gradient(ellipse at center,transparent 30%,#c4afd0 32% 40%,transparent 42%);background-size:35px 30px;transform:rotate(-17deg); }.mobile-break { display:none; } footer { max-width:1240px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;font-size:12px; }.social,footer>div { display:flex;gap:22px;align-items:center; }.social { gap:12px; }
@media (max-width:760px) { .site-header { height:67px;padding:0 20px; }.brand { font-size:26px; } nav { display:none; }.small-button { padding:10px 13px;font-size:11px; }.hero { padding:45px 24px 34px;display:block;min-height:0; }.hero h1 { font-size:44px; }.hero-copy>p { font-size:14px;margin-top:23px;line-height:1.85; }.actions { margin-top:26px;gap:20px; }.hero-visual { height:340px;margin-top:32px; }.hero-visual .phone { transform:scale(.77) rotate(3deg);transform-origin:top left;left:21%; }.yarn-a { width:120px;height:120px;right:-10px; }.yarn-b { width:82px;height:82px;right:9px;top:106px; }.yarn-c { width:84px;height:84px;right:25%;bottom:14px; }.lace { width:250px; }.section { padding:75px 24px; }.section h2,.cta h2 { font-size:34px; }.empathy,.faq { grid-template-columns:1fr;gap:40px; }.empathy .eyeless-label { font-size:14px;margin-bottom:23px; }.empathy li { font-size:14px; }.desk-scene { height:282px; }.notebook { right:25px;transform:scale(.77) rotate(7deg);transform-origin:top right; }.small-phone { left:45px; }.features>h2 { margin-bottom:43px;text-align:left; }.feature,.feature.reverse { display:flex;flex-direction:column;gap:25px;margin-bottom:52px;direction:ltr;align-items:stretch; }.feature-media { height:232px; }.feature-media .phone { transform:scale(.51); }.feature h3 { font-size:29px; }.feature-copy>p:last-child { font-size:14px; }.steps { grid-template-columns:1fr;gap:35px;margin-top:38px; }.thread { display:none; }.step-icon { width:75px;height:75px;font-size:34px; }.steps h3 { font-size:20px; }.case-grid { grid-template-columns:1fr;gap:35px;margin-top:39px; }.case-image { height:220px; }.faq { gap:35px; }.faq button { font-size:14px;gap:12px; }.cta { padding:69px 24px 235px;min-height:0; }.cta p { font-size:14px;line-height:1.8; }.cta-craft { position:absolute;width:320px;height:210px;right:-28px;bottom:-5px; }.cta-yarn { width:130px;height:130px;right:72px; }.cta-lace { width:290px;height:190px;right:-20px;bottom:-45px; }.mobile-break { display:block; } footer { padding:29px 24px;display:block; }.brand { display:block; } footer>div { flex-wrap:wrap;gap:13px 19px;margin-top:19px;line-height:1.5; }.social { margin-top:18px; } }