:root{
  --cream:#f4f0e8;
  --paper:#fbf8f2;
  --brown:#4b392f;
  --ink:#44352e;
  --muted:#776a61;
  --gold:#b38a4f;
  --gold-deep:#8d693b;
  --line:rgba(126,101,74,.22);
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:var(--cream);
  background-image:linear-gradient(rgba(251,248,242,.72),rgba(244,240,232,.96)),url('/assets/myzinergi-japandi-hero-v3.png');
  background-attachment:fixed;
  background-position:center top;
  background-size:cover;
  color:var(--ink);
  font-family:Manrope,sans-serif;
}
.top{
  min-height:72px;
  padding:14px clamp(22px,6vw,92px);
  border-bottom:1px solid var(--line);
  background:rgba(251,248,242,.93);
  color:var(--ink);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--brown);
  font-family:Manrope,sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.34em;
}
.brand::before{
  content:'';
  width:38px;
  height:38px;
  background:url('/assets/brand/zinergi-mark-approved-v1.svg') center/contain no-repeat;
}
.version{color:var(--muted);font-size:9px;letter-spacing:.2em}
.hero{
  min-height:440px;
  display:grid;
  align-content:center;
  padding:76px 22px 110px;
  background:
    linear-gradient(90deg,rgba(245,239,230,.45),rgba(248,243,235,.75) 44%,rgba(245,239,230,.3)),
    linear-gradient(180deg,rgba(248,244,237,.05),rgba(72,55,43,.08)),
    url('/assets/myzinergi-japandi-hero-v3.png') center 46%/cover no-repeat;
  color:var(--ink);
  text-shadow:0 1px 18px rgba(255,250,241,.78);
}
.hero .eye{color:var(--gold-deep)}
.hero h1{
  max-width:870px;
  margin:18px auto;
  color:var(--brown);
  font-weight:400;
  font-size:clamp(48px,6.4vw,82px);
  letter-spacing:-.025em;
}
.hero p{max-width:650px;color:#5e5149;font-size:16px}
.eye{color:var(--gold-deep);font-size:10px;font-weight:600;letter-spacing:.24em}
.wrap{max-width:1120px;margin:-56px auto 0;padding:0 22px 90px}
.panel{
  margin-bottom:22px;
  padding:clamp(26px,4vw,48px);
  border:1px solid rgba(126,101,74,.2);
  border-radius:4px;
  background:rgba(251,248,242,.96);
  box-shadow:0 28px 70px -48px rgba(65,49,39,.46);
  backdrop-filter:blur(14px);
}
h2{color:var(--brown);font-weight:400;font-size:clamp(34px,4vw,50px)}
h3{color:var(--brown);font-family:"Cormorant Garamond",serif;font-size:25px;font-weight:500}
p{color:var(--muted)}
.filters{grid-template-columns:1fr auto;gap:10px}
select,input,textarea{
  border:1px solid var(--line);
  border-radius:2px;
  background:#f7f2ea;
  color:var(--ink);
}
select:focus,input:focus,textarea:focus{outline:2px solid rgba(179,138,79,.3);outline-offset:1px}
.btn{
  min-height:48px;
  border:1px solid var(--brown);
  border-radius:2px;
  background:var(--brown);
  color:#fffaf2;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.btn.gold{background:#8f775f;border-color:#8f775f}
.cards{gap:12px}
.card{
  border:1px solid var(--line);
  border-radius:3px;
  background:#fbf8f2;
  box-shadow:none;
}
.card h3{font-size:32px;font-weight:400}
.chip{
  border:1px solid rgba(179,138,79,.25);
  border-radius:2px;
  background:#f2eadf;
  color:#6d5845;
}
.back{color:var(--gold-deep)}
.journey{gap:1px;border:1px solid var(--line);background:var(--line)}
.step{border-radius:0;background:#f5efe6;color:var(--brown)}
.step b{color:var(--gold-deep)}
.choice{
  border:1px solid var(--line);
  border-radius:2px;
  background:#fbf8f2;
  color:var(--ink);
}
.choice:hover{border-color:rgba(141,105,59,.55);background:#f7f0e5}
.choice.selected{border-color:var(--gold-deep);box-shadow:inset 3px 0 var(--gold)}
.state{border:1px solid rgba(126,101,74,.16);border-radius:2px;background:#eee8dc;color:#625848}
.state.error{background:#f4e6df;color:#7c4934}
.success .mark{border-radius:50%;background:#ede5d6;color:var(--gold-deep)}
@media(max-width:720px){
  .top{min-height:64px;padding:11px 16px}.brand{font-size:13px}.brand::before{width:32px;height:32px}.version{display:none}
  .hero{min-height:400px;padding:64px 20px 90px;background-position:58% center}.hero h1{font-size:48px}.hero p{font-size:14px}
  .wrap{margin-top:-42px;padding:0 12px 60px}.panel{padding:25px 18px}
  .cards,.form,.filters{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:1fr}.full{grid-column:auto}
}