.welcome{position:relative;isolation:isolate;min-height:calc(100svh - 94px);display:flex;align-items:center;justify-content:flex-end;overflow:hidden;padding:55px max(6vw,28px)}
.welcome-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 57%;z-index:-2;animation:room-reveal 1.3s ease-out both}
.welcome:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f5f2e900 25%,#f7f5ef66 65%,#f7f5efbb);z-index:-1}
.welcome-content{width:min(420px,100%);padding:35px;border:1px solid #fff9;border-radius:15px;background:#fbfaf4eb;backdrop-filter:blur(14px);box-shadow:0 15px 65px #2c392315;animation:step-reveal .55s ease-out both}
.welcome-content>p{font-size:13px;color:var(--muted);margin:0 0 12px}
.welcome h1{font:500 clamp(30px,3vw,44px)/1.13 var(--pc-font);letter-spacing:-1.6px;margin:0 0 29px;color:var(--ink)}
.welcome h1 span{color:var(--red)}
.welcome-actions{display:grid;gap:10px}
.welcome-action{display:flex;align-items:center;justify-content:space-between;min-height:55px;padding:15px 18px;border:1px solid #c9cbbf;border-radius:7px;background:#fff5;color:var(--ink);font-size:14px;text-align:left;transition:transform .2s,background .2s,border-color .2s}
.welcome-action:hover{transform:translateX(3px);border-color:#68755d;background:#fff9}
.welcome-action.primary{background:var(--red);color:white;border-color:var(--red)}
.welcome-action.primary:hover{background:#94142d;border-color:#94142d}
.welcome-action:disabled{opacity:.6;cursor:default;transform:none}
.welcome-action .soon-tag{font-size:9px;letter-spacing:.2px;border:1px solid #c9cbbf;border-radius:20px;padding:4px 8px}
.journey-page{max-width:1320px;margin:auto;padding:34px max(5vw,24px) 52px;min-height:70svh;animation:step-reveal .3s ease-out both}
.journey-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}
.journey-back{display:inline-flex;gap:9px;align-items:center;min-height:40px;font-size:12px;color:var(--muted)}
.journey-step{font-size:10px;letter-spacing:1.8px;color:var(--muted)}
.journey-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:25px}
.journey-heading h1{font:500 36px/1.15 var(--pc-font);letter-spacing:-1.2px;margin:0}
.journey-heading>span{font-size:12px;color:var(--muted)}
.area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.area-card{position:relative;min-height:425px;border-radius:12px;overflow:hidden;isolation:isolate;background:#e7e9df;animation:step-reveal .45s ease-out backwards;transition:transform .25s,box-shadow .25s}
.area-card:nth-child(2){animation-delay:.06s}.area-card:nth-child(3){animation-delay:.12s}
.area-card:hover{transform:translateY(-5px);box-shadow:0 17px 35px #253b3015}
.area-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35%;transition:transform .7s}
.area-card:hover>img{transform:scale(1.035)}
.area-card:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#183025c4);z-index:1}
.area-label{position:absolute;left:23px;right:23px;bottom:24px;color:#fff;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
.area-label h2{font-size:23px;letter-spacing:-.5px;font-weight:500;margin:0}.area-label small{display:block;font-size:10px;margin-top:8px;opacity:.8}
.area-label>span{display:grid;place-items:center;width:37px;height:37px;border:1px solid #fff9;border-radius:50%;font-size:21px}
.area-art{position:absolute;inset:0;background:#dfe6e4}
.area-art.exterior{background:linear-gradient(180deg,#c8d8da,#f0eee5 71%,#a2ac8a 71%)}
.house-shape{position:absolute;width:66%;height:63%;left:16%;top:22%;background:linear-gradient(90deg,#efede4 0 63%,#d5d5cb 63%);box-shadow:12px -12px 0 #758b85}
.house-shape:before{content:'';position:absolute;inset:16% 47% 17% 10%;background:repeating-linear-gradient(90deg,#637977 0 27%,#c6d0c3 27% 33%);border:5px solid #f4f1e6}
.house-shape:after{content:'';position:absolute;width:18%;height:44%;bottom:0;right:12%;background:#7b8c7f;border:5px solid #e4e2d6}
.area-art.coatings{background:repeating-linear-gradient(90deg,#d5bda1 0 13%,#c8ac8e 13% 13.6%,#dac4ab 13.6% 27%)}
.wood-shape{position:absolute;left:20%;right:20%;top:15%;bottom:12%;border:13px solid #efeae1;background:linear-gradient(90deg,#728571,#8f9a7e);box-shadow:14px 16px 25px #4c452333}
.wood-shape:after{content:'';position:absolute;right:10%;top:52%;width:28px;height:4px;background:#cbb47a;box-shadow:0 2px 3px #4443}
.template-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:880px;margin:auto}
@media(min-width:651px){.template-grid:has(.template-card:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:18px}}
@media(max-width:650px){.template-grid:has(.template-card:nth-child(2)){gap:16px}}
.template-card{position:relative;display:block;border-radius:12px;overflow:hidden;background:#e4e5db;isolation:isolate;aspect-ratio:3/2}
.template-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.template-card:hover img{transform:scale(1.025)}
.template-card:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#203225b8)}
.template-label{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:white;z-index:1}
.template-label strong{font-size:24px;font-weight:500}.template-label>span{background:#fbfaf4;color:#304135;border-radius:6px;padding:13px 17px;font-size:12px}
.template-empty{padding:75px 24px;text-align:center;border:1px solid var(--line);border-radius:12px;background:#edeede}
.template-empty h2{font-weight:500;font-size:27px;margin:10px 0 24px}.template-empty p{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
@keyframes step-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes room-reveal{from{opacity:.6;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(max-width:650px){
  .welcome{min-height:calc(100svh - 78px);padding:145px 16px 24px;align-items:flex-end;justify-content:center}
  .welcome-photo{object-position:32% 45%}.welcome:before{background:linear-gradient(180deg,#f7f5ef00 25%,#f7f5ef55 65%,#f7f5efb3)}
  .welcome-content{padding:25px 23px;border-radius:13px;max-width:380px}
  .welcome h1{font-size:33px;letter-spacing:-1px;margin-bottom:22px}.welcome-content>p{font-size:12px}
  .welcome-action{min-height:50px;padding:13px 15px;font-size:13px}.welcome-actions{gap:9px}
  .journey-page{padding:17px 16px 30px}.journey-top{margin-bottom:18px}.journey-step{font-size:9px}
  .journey-heading{margin-bottom:19px}.journey-heading h1{font-size:28px}.journey-heading>span{font-size:11px}
  .area-grid{grid-template-columns:1fr;gap:12px}.area-card{min-height:175px}.area-card>img{object-position:50% 48%}
  .area-label{left:20px;right:20px;bottom:20px}.area-label h2{font-size:22px}.area-label small{font-size:9px;margin-top:5px}
  .area-card:after{inset:0;background:linear-gradient(90deg,#213d3266,#213d3222)}
  .house-shape{left:50%;width:37%;height:83%;top:23%;box-shadow:8px -8px 0 #758b85}.wood-shape{left:57%;right:13%;top:14%;bottom:-20%}
  .template-card{aspect-ratio:4/5}.template-card img{object-position:40% 50%}.template-label{left:18px;right:18px;bottom:18px;align-items:start;flex-direction:column;gap:13px}.template-label strong{font-size:23px}
  .template-label>span{font-size:11px;padding:12px 15px}
}
@media(prefers-reduced-motion:reduce){.welcome-photo,.welcome-content,.journey-page,.area-card{animation:none}.area-card,.area-card>img,.template-card img,.welcome-action{transition:none}.area-card:hover,.area-card:hover>img,.template-card:hover img,.welcome-action:hover{transform:none}}

.custom-entry{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border:1px dashed #bfc6b3;border-radius:12px;background:#fbfaf5;color:var(--ink);text-decoration:none}
.custom-entry:hover{border-color:#8f9a86}
.custom-entry>span:nth-child(2){display:grid;flex:1;gap:3px}
.custom-entry strong{font-size:15px;font-weight:600}
.custom-entry small{font-size:12px;color:var(--muted);line-height:1.5}
.custom-entry-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#e9eddf;color:#232b2b}
.custom-entry-icon svg{width:24px;height:24px}
