:root { --ink:#191919; --muted:#66655f; --yellow:#ffe640; --paper:#fffdf7; --line:#e8e5d9; --green:#d8f36a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.site-header { height:82px; padding:0 max(5vw,24px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,253,247,.93); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--yellow); font-size:19px; }
.brand-name { display:grid; font-size:17px; line-height:1.05; }
.brand-name small { margin-top:4px; color:#77746b; font-size:9px; font-weight:600; letter-spacing:.01em; }
.header-nav { display:flex; gap:34px; color:#4f4d47; font-size:12px; font-weight:700; }
.header-nav a:hover,.header-contact:hover { opacity:.65; }
.header-contact { font-size:12px; font-weight:800; }
.hero { min-height:580px; padding:68px max(8vw,24px) 0; position:relative; display:grid; grid-template-columns:minmax(360px,.93fr) minmax(370px,1.07fr); align-items:center; overflow:hidden; background:var(--yellow); }
.hero-copy { max-width:510px; position:relative; z-index:2; padding-bottom:62px; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; line-height:1.3; font-weight:800; letter-spacing:.13em; }
.eyebrow span { width:8px; height:8px; background:var(--ink); border-radius:50%; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:22px 0 17px; font-size:clamp(48px,6vw,78px); line-height:.98; letter-spacing:-.075em; font-weight:800; }
.hero-lead { max-width:440px; margin-bottom:24px; color:#3d3a30; font-size:15px; line-height:1.7; }
.button { min-height:52px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:24px; border-radius:999px; font-size:12px; font-weight:800; transition:transform .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:17px; }
.button-dark { color:#fff; background:var(--ink); }
.button-dark:hover { background:#38352d; }
.hero-note { margin:13px 0 0; color:#645f4d; font-size:10px; line-height:1.5; }
.hero-art { min-height:400px; height:100%; position:relative; align-self:stretch; }
.sun { position:absolute; top:7%; right:14%; width:245px; height:245px; border-radius:50%; background:#fff5a2; }
.route { position:absolute; border:2px dashed rgba(24,24,24,.28); border-radius:50%; transform:rotate(-18deg); }
.route-one { width:420px; height:170px; top:19%; left:7%; }
.route-two { width:380px; height:125px; top:27%; left:14%; transform:rotate(22deg); }
.delivery-card { position:absolute; top:12%; left:8%; z-index:2; width:185px; padding:17px 18px; border:1px solid rgba(25,25,25,.1); border-radius:15px; background:#fffdf4; box-shadow:0 15px 38px rgba(46,38,4,.08); transform:rotate(-5deg); }
.card-kicker { display:block; margin-bottom:9px; color:#787366; font-size:8px; font-weight:800; letter-spacing:.13em; }
.delivery-card strong { font-size:16px; line-height:1.25; letter-spacing:-.04em; }
.card-dot { position:absolute; right:15px; bottom:18px; width:12px; height:12px; border-radius:50%; background:#a4d628; }
.city-block { position:absolute; bottom:16%; border-radius:11px 11px 0 0; background:#f4ce31; }
.block-one { left:4%; width:86px; height:120px; }.block-two { left:19%; width:112px; height:184px; background:#efcf4c; }.block-three { right:4%; width:97px; height:143px; background:#f5d760; }
.courier-bag { position:absolute; z-index:3; right:25%; top:38%; width:96px; height:108px; display:grid; place-items:center; border:4px solid var(--ink); border-radius:18px 18px 24px 24px; background:#fff9ce; transform:rotate(8deg); }
.courier-bag span { position:absolute; top:-20px; left:20px; width:48px; height:29px; border:4px solid var(--ink); border-bottom:0; border-radius:20px 20px 0 0; }
.courier-bag b { font-size:50px; font-weight:800; }
.courier-body { position:absolute; z-index:2; right:24%; top:57%; width:89px; height:113px; border:4px solid var(--ink); border-radius:38px 42px 14px 14px; background:#b6dc3b; transform:rotate(-12deg); }
.courier-head { position:absolute; z-index:4; right:20%; top:43%; width:57px; height:60px; border:4px solid var(--ink); border-radius:50%; background:#e6aa77; }
.courier-head:before { content:""; position:absolute; top:-8px; left:-5px; width:61px; height:27px; border:4px solid var(--ink); border-radius:40px 40px 12px 12px; background:#34332f; }
.wheel { position:absolute; z-index:3; bottom:11%; width:112px; height:112px; border:5px solid var(--ink); border-radius:50%; background:transparent; }
.wheel-left { left:15%; }.wheel-right { right:9%; }
.bike-frame { position:absolute; z-index:3; bottom:16%; right:16%; width:58%; height:115px; border:5px solid var(--ink); border-top:0; transform:skew(-27deg) rotate(-7deg); }
.pedal { position:absolute; z-index:4; bottom:26%; right:35%; width:36px; height:36px; border:5px solid var(--ink); border-radius:50%; background:var(--yellow); }
.art-caption { position:absolute; right:2%; bottom:4%; z-index:4; font-size:10px; line-height:1.4; font-weight:800; text-align:right; }
.hero-bottom { position:absolute; right:8vw; bottom:22px; left:8vw; display:flex; gap:22px; padding-top:12px; border-top:1px solid rgba(25,25,25,.2); font-size:8px; font-weight:800; letter-spacing:.14em; }
.section-wrap { width:min(1040px,84vw); margin:0 auto; }
.benefits { padding-top:96px; padding-bottom:103px; display:grid; grid-template-columns:.78fr 1.22fr; gap:90px; }
.section-heading h2,.steps h2,.closing h2 { margin:17px 0 0; font-size:clamp(36px,4.5vw,56px); line-height:1.02; letter-spacing:-.07em; }
.benefit-list { border-top:1px solid var(--line); }
.benefit { display:grid; grid-template-columns:54px 1fr; gap:12px; padding:22px 0; border-bottom:1px solid var(--line); }
.benefit-number { padding-top:3px; color:#858174; font-size:10px; font-weight:800; }
.benefit h3,.step-list h3 { margin-bottom:6px; font-size:15px; letter-spacing:-.03em; }
.benefit p,.step-list p { max-width:530px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.steps { padding:81px 0; background:#1d1d1b; color:#fffdf7; }
.steps-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.steps .eyebrow { color:var(--yellow); }
.steps-intro { max-width:360px; margin:18px 0 23px; color:#c2c0b9; font-size:13px; line-height:1.7; }
.button-light { color:var(--ink); background:var(--yellow); }
.step-list { margin:0; padding:0; list-style:none; }
.step-list li { display:grid; grid-template-columns:42px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid #44433f; }
.step-list li:first-child { border-top:1px solid #44433f; }
.step-list li>span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:var(--ink); background:var(--green); font-size:12px; font-weight:800; }
.step-list h3 { color:#fff; }.step-list p { color:#b7b5ae; }
.faq { padding-top:94px; padding-bottom:101px; display:grid; grid-template-columns:.78fr 1.22fr; gap:90px; }
.faq-list { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { padding:20px 34px 20px 0; position:relative; cursor:pointer; font-size:13px; font-weight:800; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:"+"; position:absolute; right:3px; top:16px; font-size:20px; font-weight:500; }
.faq details[open] summary:after { content:"−"; }
.faq details p { max-width:550px; margin:0; padding:0 20px 20px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.closing { padding:58px 0; background:var(--green); }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.closing h2 { max-width:530px; font-size:clamp(34px,4vw,48px); }
.closing p { margin:12px 0 0; color:#494b3b; font-size:12px; line-height:1.6; }
.site-footer { padding:31px max(8vw,24px) 26px; background:#f4f1e7; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:23px; border-bottom:1px solid #dedace; }
.brand-footer .brand-mark { background:#fffdf7; }
.footer-links { display:flex; gap:24px; color:#49473f; font-size:11px; font-weight:700; }
.disclaimer,.privacy-note { max-width:930px; margin:18px auto 0; color:#77746b; font-size:9px; line-height:1.7; }
.privacy-note { margin-top:7px; }
@media (max-width:800px) {
    .site-header { height:68px; padding:0 20px; }.header-nav { display:none; }.header-contact { font-size:10px; }
    .hero { padding:51px 24px 0; grid-template-columns:1fr; }.hero-copy { padding-bottom:12px; }.hero-art { min-height:370px; margin-top:-5px; }.hero-bottom { right:24px; left:24px; gap:12px; justify-content:space-between; font-size:7px; }
    .sun { right:15%; width:205px; height:205px; }.route-one { width:360px; left:0; }.route-two { width:325px; left:6%; }.delivery-card { left:0; }.courier-bag { right:27%; }.courier-body { right:26%; }.courier-head { right:22%; }.wheel-left { left:7%; }.wheel-right { right:1%; }.bike-frame { right:9%; width:69%; }.art-caption { right:1%; }
    .section-wrap { width:auto; margin:0 24px; }.benefits,.faq { padding-top:66px; padding-bottom:68px; grid-template-columns:1fr; gap:32px; }.steps { padding:63px 0; }.steps-inner { grid-template-columns:1fr; gap:39px; }.closing { padding:44px 0; }.closing-inner { align-items:flex-start; flex-direction:column; }.footer-top { align-items:flex-start; flex-direction:column; }.footer-links { flex-wrap:wrap; gap:12px 22px; }
}
@media (max-width:390px) { .header-contact { display:none; } h1 { font-size:48px; }.hero-art { min-height:320px; }.delivery-card { width:155px; }.delivery-card strong { font-size:14px; }.courier-bag { right:24%; width:78px; height:92px; }.courier-body { right:24%; width:75px; }.courier-head { right:18%; }.wheel { width:94px; height:94px; }.bike-frame { height:95px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }