*{box-sizing:border-box}

body{
  margin:0;
  background:#EFEDE7;
  color:#16171A;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
a:hover{color:#5A5C61}
input::placeholder{color:#A5A29B}
input:focus{outline:none}

[hidden]{display:none!important}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- каркас ---------- */

.stage{position:relative;height:100dvh;background:#EFEDE7;overflow:hidden}

.bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.layout{
  position:relative;
  height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(16px,2.4vh,32px);
  padding:clamp(24px,4vw,52px);
}

/* ---------- облако ---------- */

.cloud{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  animation:fadeUp .8s cubic-bezier(.2,.75,.25,1) .06s both;
}

/* left/top/font-size/transform выставляет app.js покадрово */
.word{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  font-size:20px;
  letter-spacing:-0.02em;
  color:#16171A;
  will-change:transform,opacity;
}

.muted{color:#A5A29B}

/* ---------- заголовок ---------- */

.head-box{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(12px,2vh,22px);
  width:max-content;
  max-width:94%;
  pointer-events:none;
}

.badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 18px 9px 14px;
  border:1px solid rgba(192,64,42,.35);
  border-radius:999px;
  background:rgba(192,64,42,.07);
  font-size:clamp(12px,1.15vw,15px);
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#C0402A;
}

.badge-dot{width:8px;height:8px;border-radius:50%;background:#C0402A;flex:none}

.head{
  margin:0;
  font-size:clamp(28px,7.4vw,132px);
  line-height:.9;
  white-space:nowrap;
  letter-spacing:-0.045em;
  font-weight:500;
  overflow-wrap:anywhere;
  will-change:opacity,transform;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 14px;
  font-size:clamp(11px,1vw,13px);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8A8C90;
}

.meta-dot{width:3px;height:3px;border-radius:50%;background:#C9C5BC}

/* ---------- форма ---------- */

.foot{animation:fadeUp .8s cubic-bezier(.2,.75,.25,1) .12s both}

.form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}

.field{
  flex:1 1 260px;
  min-width:0;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(22,23,26,.10);
  border-radius:4px;
  padding:18px 20px;
  font-family:inherit;
  font-size:17px;
  letter-spacing:-0.01em;
  color:#16171A;
  transition:border-color .25s ease,background .25s ease;
}

.field--price{flex:1 1 130px}

.field:focus{border-color:#C0402A;background:rgba(255,255,255,.85)}

.submit{
  flex:1 1 200px;
  background:#C0402A;
  color:#FBF7F0;
  border:1px solid #C0402A;
  border-radius:4px;
  padding:19px 38px;
  cursor:pointer;
  font-family:inherit;
  font-size:18px;
  font-weight:500;
  letter-spacing:-0.01em;
  transition:background .25s ease,border-color .25s ease;
}

.submit:hover{background:#A5341F;border-color:#A5341F}
.submit:disabled{opacity:.6;cursor:default}
.submit:disabled:hover{background:#C0402A;border-color:#C0402A}

.form-error{margin:14px 0 0;font-size:15px;line-height:1.4;color:#C0402A}

.done{animation:fadeUp .5s cubic-bezier(.2,.75,.25,1) both}

.done-text{
  margin:0;
  font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-0.025em;
  line-height:1.25;
}

.accent{color:#C0402A}

.ghost{
  margin-top:18px;
  background:transparent;
  border:1px solid #C9C5BC;
  border-radius:4px;
  padding:14px 26px;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  color:#5A5C61;
  transition:border-color .25s ease,color .25s ease;
}

.ghost:hover{border-color:#16171A;color:#16171A}