:root {
  --accent:#F06022;
  --bg:#f7f9fb;
  --card:#fff;
  --text:#222;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
body{background:var(--bg);color:var(--text)}

.hg-back-btn{
  position:fixed;top:18px;left:18px;z-index:200;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  padding:8px 12px;border-radius:10px;
  display:flex;gap:8px;align-items:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  visibility:hidden;transform:translateY(-4px);
  transition:all .25s ease
}
.hg-back-btn.show{visibility:visible;opacity:1;transform:translateY(0)}

.hg-viewport{width:100vw;height:100vh;position:relative;overflow:hidden}
.hg-wrapper{height:100%;display:flex;transition:transform .5s cubic-bezier(.2,.9,.2,1);will-change:transform}

.hg-step{
  flex:0 0 100vw;height:100vh;padding:48px 0px;
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.hg-step h2{margin:0 0 18px;font-size:1.6rem}

.hg-btn-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;min-width:90vw;max-width:1000px}
.hg-btn{
  background:var(--card);border:2px solid var(--accent);
  padding:14px 28px;border-radius:12px;cursor:pointer;
  font-size:1rem;min-width:120px;text-align:center;
  box-shadow:0 6px 20px rgba(16,24,40,.04);
  transition:transform .18s ease,background .18s,color .18s;user-select:none
}
.hg-btn:hover{transform:translateY(-6px)}
.hg-btn.selected{
  background:var(--accent);color:#fff;transform:scale(1.03);
  box-shadow:0 10px 30px rgba(0,184,148,.15)
}

.hg-summary{
  background:var(--card);padding:28px;border-radius:14px;
  box-shadow:0 18px 40px rgba(16,24,40,.08);text-align:left;
  max-width:420px;width:90%
}
.hg-summary h3{margin-top:0}

.hg-user-info{max-width:420px;width:90%;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.hg-user-info input, #hg-summaryBox input{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.08);font-size:.95rem
}

.hg-sendBtn{
  margin-top:16px;display:inline-block;padding:12px 20px;border-radius:10px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:600
}
.hg-btn-ghost{
  padding:10px 14px;border-radius:8px;border:1px solid rgba(0,0,0,.08);
  background:#fff;cursor:pointer
}
.hg-status{margin-top:10px;font-size:.95rem;color:#333}

@media (max-width:600px){
  .hg-btn{min-width:100px;padding:12px 18px}
  .hg-back-btn{top:12px;left:12px;padding:6px 10px}
}