@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root { --ink:#171719; --yellow:#ffe100; --cream:#fffdf6; --muted:#6c6b66; --line:#e7e4dc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Cairo,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { min-height:82px; padding:0 clamp(20px,6vw,100px); display:flex; align-items:center; justify-content:space-between; gap:25px; border-bottom:1px solid var(--line); background:#fffef9; }
.brand { display:inline-flex; direction:ltr; align-items:center; gap:8px; font-size:13px; font-weight:800; line-height:.83; letter-spacing:-.8px; }
.brand b { color:#e2c600; }.brand-mark { width:33px; height:33px; display:grid; place-items:center; color:var(--ink); background:var(--yellow); clip-path:polygon(0 0,100% 0,100% 70%,55% 100%,55% 58%,0 100%); font-weight:900; font-size:20px; }
.navigation { display:flex; gap:28px; color:#4d4c49; font-size:14px; }.navigation a:hover, footer>a:hover { color:#b59c00; }
.header-action,.button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:0 22px; border-radius:5px; font-weight:700; font-size:14px; transition:.2s transform,.2s background; }.header-action,.button-primary { background:var(--yellow); }.header-action:hover,.button:hover { transform:translateY(-2px); }.button-secondary { border:1px solid var(--ink); }
.hero { overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; min-height:610px; padding:70px clamp(20px,10vw,175px); background:radial-gradient(circle at 77% 42%,#fff8a4 0 1%,transparent 22%),#f7f4ed; }
.eyebrow { margin:0 0 12px; color:#a68d00; font-size:13px; font-weight:800; letter-spacing:.2px; }.hero h1 { margin:0; font-size:clamp(48px,6vw,82px); line-height:1.16; letter-spacing:-3px; }.hero-text { max-width:560px; color:#595853; font-size:17px; line-height:2; }.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }.hero-notes { display:flex; flex-wrap:wrap; gap:17px; margin-top:28px; color:#55534e; font-size:13px; }
.hero-art { position:relative; height:420px; }.ring { position:absolute; border:1px solid #dad5c1; border-radius:50%; }.ring-one { inset:0 0 20px 30px; }.ring-two { inset:55px 55px 75px 90px; border-color:#e6cf19; }.delivery-card { position:absolute; z-index:2; top:105px; left:9%; width:min(340px,88%); padding:22px; border-radius:16px; background:#1b1b1c; color:white; box-shadow:0 25px 45px #38332035; transform:rotate(-6deg); }.card-top,.card-bottom { display:flex; justify-content:space-between; font-size:13px; }.status-dot { width:9px; height:9px; border-radius:50%; background:var(--yellow); align-self:center; }.route { display:flex; align-items:center; gap:11px; padding:38px 10px 30px; }.route i { flex:1; border-top:2px dashed #777; }.pin { width:17px; height:17px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }.pickup { background:var(--yellow); }.dropoff { background:white; }.scooter { position:absolute; z-index:3; bottom:18px; right:15%; width:88px; height:88px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); font-size:55px; transform:rotate(180deg); box-shadow:0 15px 30px #8f801d3e; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); max-width:1060px; margin:-35px auto 0; position:relative; background:white; border-radius:12px; box-shadow:0 18px 40px #39342613; }.stats div { padding:24px 34px; border-left:1px solid var(--line); }.stats div:last-child { border:0; }.stats strong,.stats span { display:block; }.stats strong { font-size:19px; }.stats span { color:var(--muted); font-size:12px; margin-top:3px; }
.section { max-width:1160px; margin:auto; padding:115px 25px; }.section-heading { max-width:580px; }.section h2,.restaurant-banner h2,.contact h2 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.35; letter-spacing:-1px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px; }.service-card { min-height:250px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:12px; }.service-card.featured { background:var(--yellow); border-color:var(--yellow); }.service-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:33px; background:#f4f1e8; border-radius:50%; font-size:27px; }.featured .service-icon { background:#fff6a4; }.service-card h3 { margin:0 0 8px; font-size:20px; }.service-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.9; }
.steps { background:#1b1b1c; max-width:none; padding-right:max(25px,calc((100% - 1110px)/2)); padding-left:max(25px,calc((100% - 1110px)/2)); color:#fff; }.steps .eyebrow { color:var(--yellow); }.steps ol { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:55px 0 0; padding:0; list-style:none; }.steps li { border-top:1px solid #444; padding-top:18px; }.steps li span { color:var(--yellow); font-size:13px; font-weight:800; }.steps li h3 { margin:22px 0 5px; font-size:21px; }.steps li p { color:#b9b9b9; margin:0; font-size:14px; }
.restaurant-banner { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:1110px; margin:110px auto; padding:58px; border-radius:15px; background:linear-gradient(115deg,#f8df00,#fff08b); }.restaurant-banner p:not(.eyebrow) { max-width:670px; color:#4c450b; }.restaurant-banner .button { background:#1b1b1c; color:white; white-space:nowrap; }
.contact { padding:100px 25px; text-align:center; background:#f2efe6; }.contact>p:not(.eyebrow) { color:var(--muted); }.contact-actions { justify-content:center; }.contact small { display:block; margin-top:30px; color:#87847b; font-size:11px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px clamp(20px,6vw,100px); background:#191919; color:#fff; font-size:12px; } footer .brand-mark { color:#191919; } footer p { color:#aaa; margin:0; }
@media (max-width:760px) { .site-header { min-height:68px; padding:0 18px; }.navigation { display:none; }.header-action { min-height:38px; padding:0 14px; font-size:12px; }.hero { grid-template-columns:1fr; padding:65px 24px 38px; min-height:auto; }.hero h1 { font-size:52px; }.hero-art { height:310px; margin-top:25px; }.delivery-card { left:5%; top:65px; }.stats { grid-template-columns:1fr; margin:0; border-radius:0; }.stats div { border-left:0; border-bottom:1px solid var(--line); }.service-grid,.steps ol { grid-template-columns:1fr; }.section { padding:75px 24px; }.restaurant-banner { margin:70px 20px; padding:32px 25px; align-items:flex-start; flex-direction:column; }.contact { padding:75px 24px; } footer { align-items:flex-start; flex-direction:column; } }