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

:root { --ink:#231c1a; --cream:#fff8f3; --paper:#fffdfb; --rose:#e95464; --rose-dark:#d73d50; --line:#eadfd8; --muted:#80716c; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--cream); color:var(--ink); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
header { height:84px; max-width:1180px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.logo { display:grid; place-items:center; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:50%; font-family:Georgia,serif; font-size:19px; }
.logo span { color:var(--rose); font-size:9px; margin-left:-2px; }
.status { border:1px solid var(--line); border-radius:99px; padding:8px 13px; font-size:12px; color:var(--muted); background:rgba(255,255,255,.6); }
.status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#62a76f; box-shadow:0 0 0 3px #dcefe0; }
main { max-width:1180px; min-height:100vh; margin:auto; padding:54px 28px 70px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:center; }
.intro, .order-card { min-width:0; width:100%; }
.eyebrow { text-transform:uppercase; color:var(--rose); font-size:11px; font-weight:700; letter-spacing:.2em; }
h1 { margin:14px 0 24px; font-size:clamp(56px,6vw,86px); line-height:.92; letter-spacing:-.065em; font-weight:600; }
h1 em, .success h2 em { color:var(--rose); font-family:'Playfair Display',serif; font-weight:600; }
.subtitle { max-width:450px; font-size:16px; line-height:1.7; color:var(--muted); }
.promise { display:flex; align-items:center; gap:14px; margin-top:38px; }
.promise>span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fde3e4; color:var(--rose); }
.promise div { display:flex; flex-direction:column; gap:3px; }
.promise strong { font-size:13px; }
.promise small { font-size:11px; color:var(--muted); }
.order-card { background:var(--paper); border:1px solid var(--line); padding:28px; border-radius:26px; box-shadow:0 24px 70px rgba(74,47,37,.11); }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.card-head>div { display:flex; align-items:center; gap:12px; }
.step { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:white; font-size:10px; }
h2 { margin:0; font-size:18px; letter-spacing:-.03em; }
.locate { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); background:white; border-radius:50%; cursor:pointer; transition:.2s; }
.locate:hover { border-color:var(--rose); color:var(--rose); }
.locate svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.7; }
.map-wrap { height:300px; border-radius:17px; overflow:hidden; position:relative; background:#eee5df; transition:height .38s cubic-bezier(.22,.8,.3,1); }
.map-wrap.expanded { height:420px; }
#map { height:100%; z-index:1; }
.map-hint { position:absolute; z-index:500; top:14px; left:50%; transform:translateX(-50%); white-space:nowrap; background:rgba(35,28,26,.86); color:white; padding:8px 12px; border-radius:99px; font-size:11px; pointer-events:none; transition:.25s; }
.map-hint.hidden { opacity:0; transform:translate(-50%,-8px); }
.selected-place { margin:17px 0; min-height:56px; border:1px solid var(--line); border-radius:13px; padding:10px 13px; display:flex; align-items:center; gap:12px; }
.pin { width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; background:#fde6e7; color:var(--rose); font-size:12px; }
.selected-place div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.selected-place small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.selected-place strong { font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
label { display:block; font-size:12px; font-weight:700; margin:3px 0 8px; }
label span { color:var(--muted); font-weight:400; }
input[type="time"] { width:100%; min-height:45px; border:1px solid var(--line); border-radius:13px; padding:10px 14px; outline:none; color:var(--ink); font:600 13px/1.5 inherit; background:white; transition:.2s; }
input[type="time"]:focus { border-color:#dca5aa; box-shadow:0 0 0 3px #fbe9ea; }
.submit { width:100%; margin-top:14px; border:0; border-radius:13px; padding:15px 18px; background:var(--rose); color:white; display:flex; align-items:center; justify-content:space-between; font:700 13px inherit; cursor:pointer; transition:.2s; }
.submit:not(:disabled):hover { background:var(--rose-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(215,61,80,.24); }
.submit:disabled { opacity:.42; cursor:not-allowed; }
.submit b { font-size:18px; font-weight:400; }
.legal { margin:10px 0 0; text-align:center; color:#a3948e; font-size:9px; }
.toast { position:fixed; z-index:3000; bottom:24px; left:50%; transform:translate(-50%,20px); padding:11px 16px; border-radius:10px; color:white; background:var(--ink); font-size:12px; opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.success { position:fixed; inset:0; z-index:2000; background:rgba(255,248,243,.94); backdrop-filter:blur(14px); display:grid; place-items:center; padding:24px; }
.success[hidden] { display:none; }
.success-card { max-width:480px; text-align:center; animation:arrive .5s ease both; }
.success h2 { font-size:46px; line-height:1; letter-spacing:-.05em; margin:12px 0 20px; }
.success-card>p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.hearts { height:60px; position:relative; color:var(--rose); }
.hearts i { position:absolute; font-style:normal; animation:float 2.2s ease-in-out infinite; }
.hearts i:nth-child(1) { left:38%; top:26px; font-size:15px; }
.hearts i:nth-child(2) { left:48%; top:0; font-size:27px; animation-delay:.25s; }
.hearts i:nth-child(3) { left:59%; top:31px; font-size:11px; animation-delay:.5s; }
.order-number { display:inline-block; margin:15px 0 24px; padding:8px 12px; border:1px solid var(--line); border-radius:99px; font-size:11px; color:var(--muted); }
.success button { border:0; border-bottom:1px solid var(--ink); background:none; padding:5px 0; font:600 12px inherit; cursor:pointer; }
@keyframes arrive { from { opacity:0; transform:translateY(16px) scale(.98); } }
@keyframes float { 50% { transform:translateY(-8px) rotate(8deg); } }
@media (max-width:800px) {
  header { height:70px; padding:0 18px; }
  main { display:block; padding:25px 16px 45px; }
  .intro { text-align:center; }
  h1 { font-size:58px; }
  .subtitle { margin-left:auto; margin-right:auto; }
  .promise { display:none; }
  .order-card { margin-top:34px; padding:17px; border-radius:21px; }
  .map-wrap { height:280px; }
  .map-wrap.expanded { height:390px; }
  .card-head { margin:5px 2px 15px; }
}
@media (max-width:420px) { .status { display:none; } h1 { font-size:51px; } .map-wrap { height:245px; } .map-wrap.expanded { height:360px; } }